横向滑动时,为什么表格头不随着滚动条移动呢? - jQuery MiniUI

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="/Scripts/Miniui/boot.js" type="text/javascript"></script>
<style type="text/css">
html,body
{
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
overflow:visible;
}
</style>
</head>
<body>
<div class="mini-toolbar" style="padding: 2px; border: 0;">
<table style="width: 100%;">
<tr>
<td style="width: 100%;">
<a class="mini-button" iconcls="icon-add" onclick="addRow()" plain="true">添加</a>
<a class="mini-button" iconcls="icon-save" onclick="saveData()" plain="true">保存</a>
<a class="mini-button" iconcls="icon-remove" onclick="removeRow()" plain="true">删除</a>
<a class="mini-button" iconcls="icon-reload" plain="true" onclick="grid.reload()">刷新</a>
</td>
<td style="white-space: nowrap;">
<label style="font-family: Verdana;">
编码或名称:
</label>
<input class="mini-textbox" id="key" onenter="onKeyEnter" />
<a class="mini-button" iconcls="icon-search" plain="true" onclick="search()">查询</a>
</td>
</tr>
</table>
</div>
<div class="mini-fit" style="background: red; height: 100px;">
<div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 100%;" url="/data/u.aspx?method=Search"
idfield="MenuID" sizelist="[5,10,20,50]" pagesize="20" fitcolumns="false" allowcellselect="true"
multiselect="true" allowcelledit="true" oncellbeginedit="OnCellBeginEdit" allowalternating="true">
<div property="columns">
<div type="indexcolumn" headeralign="center">
ID</div>
<div field="MenuID" width="120" headeralign="left" allowsort="true">
编号</div>
<div field="ParentID" width="120" headeralign="left" allowsort="true">
父级编号<input property="editor" class="mini-textbox" style="width: 100%;" /></div>
<div field="MenuName" width="120" headeralign="left" allowsort="true">
名称<input property="editor" class="mini-textbox" style="width: 100%;" /></div>
<div field="Url" width="300" headeralign="left" allowsort="true">
链接地址<input property="editor" class="mini-textbox" style="width: 100%;" /></div>
<div field="Sort" width="50" headeralign="left" allowsort="true">
排序<input property="editor" class="mini-textbox" style="width: 100%;" /></div>
<div field="Description" width="150" headeralign="left">
描述<input property="editor" class="mini-textbox" style="width: 100%;" /></div>
<div type="checkboxcolumn" field="Valid" truevalue="1" falsevalue="0" width="40"
headeralign="center" allowsort="true">
生效</div>
<div field="CreateDate" width="150" headeralign="left" dateformat="yyyy-MM-dd hh:mm:ss"
allowsort="true">
创建时间</div>
<div field="LastModDate" width="150" headeralign="left" dateformat="yyyy-MM-dd hh:mm:ss"
allowsort="true">
最后修改时间</div>
</div>
</div>
</div>
<script type="text/javascript">
mini.parse();
var grid = mini.get("datagrid1");
grid.load();
//搜索按钮事件
function search() {
var key = mini.get("key").getValue();
grid.load({ key: key });
var datagrid1 = mini.get("datagrid1");
var data = datagrid1.getData();
var json = mini.encode(data);
}
function OnCellBeginEdit(e) {
var record = e.record, field = e.field;
if (field == "MenuID" && record._state != "added") {
e.cancel = true; //如果修改则不能编辑
}
}
//查询框回车事件
function onKeyEnter(e) {
search();
}
//新增
function addRow() {
var newRow = { name: "New Row" };
grid.addRow(newRow, 0);
}
//修改
function editRow() {
var row = grid.getSelected();
if (row) {
grid.cancelEdit();
grid.beginEditRow(row);
} else {
alert("请选中记录");
}
}
//删除
function removeRow() {
var rows = grid.getSelecteds();
if (rows.length > 0) {
if (confirm("确定删除选中记录？")) {
if (rows.length > 0) {
grid.removeRows(rows, true);
}
}
} else {
alert("请选中一条记录");
}
}
//保存
function saveData() {
var data = grid.getChanges();
var json = mini.encode(data);
grid.loading("保存中，请稍后......");
$.ajax({
url: "/data/Admin/u.aspx?method=Save",
data: { data: json },
type: "post",
success: function (text) {
var o = mini.decode(text);
if (typeof (o.error) != "undefined") {
alert(o.msg);
grid.unmask();
} else {
grid.reload();
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
}
</script>
</body>
</html>

复制代码