这是我的代码:
<table id="employees"><tr><td></td></tr></table>
<div id="pager"></div>
<script type="text/javascript">
jQuery("#employees").jqGrid({
datatype: "local",
height: 250,
colNames: ['Employee #', 'Name', 'Trade'],
colModel: [
{ name: 'num', index: 'num', width: 100, sorttype: "int" },
{ name: 'name', index: 'name', width: 300 },
{ name: 'trade', index: 'trade', width: 80 },
],
multiselect: true,
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: "num",
sortorder: "desc",
scroll: false,
viewrecords: true,
autoencode: true,
height: 'auto',
caption: "Equipment"
});
var mydata = [
{ num: "492", name: "Doug Anderson", trade: "WS" },
{ num: "696", name: "William Anderson", trade: "OP" },
{ num: "826", name: "Chris Autry", trade: "WF" },
{ num: "206", name: "Tom Beffa", trade: "OP" },
{ num: "799", name: "Glenn Bixler", trade: "LB" },
{ num: "360", name: "Pete Bober", trade: "OP" },
{ num: "7", name: "Scott Burgie", trade: "PFW" },
{ num: "476", name: "James Click", trade: "W" },
{ num: "775", name: "Bryan Darst", trade: "LB" },
{ num: "249", name: "Bob Dunham", trade: "LB" },
{ num: "10", name: "Tom Ekclund", trade: "WGF" },
{ num: "390", name: "Noel Edwards", trade: "W" }
];
for (var i = 0; i <= mydata.length; i++)
jQuery("#employees").jqGrid('addRowData', i + 1, mydata[i]);
</script>
我的问题是寻呼机显示,但显示“0 中的 1”,然后只显示所有行而不是 10。奇怪的是,如果我在页面加载后更改排序列,或更改要显示的行数,它开始正常工作。例如,如果我加载页面并将要显示的行数切换为 20,它会在底部显示“1 out of 1”,然后如果我将其设置回 10,我将有 2 个页面可以切换通过。我只是不明白为什么它在页面加载后不能立即工作。
最佳答案
所描述问题的原因是使用 addRowData
填充数据。非常糟糕,官方 jqGrid demo page包含非常接近的代码,可以在“加载数据”/“数组数据”下找到。该代码不仅包含小错误( i <= mydata.length
应替换为 i < mydata.length
),而且*非常无效。演示页面很旧。从 jqGrid 3.7 开始(参见“3.7 版新功能”/“立即加载数组数据”)存在更有效的方法:使用 data
参数。
您可以扩展 mydata
的每一项,而不是在循环中填充数据具有附加属性的数组 id
并只使用 data: mydata
选项。在这种情况下,数据将首先排序(对应于您使用的 sortname: "num"
、 sortorder: "desc"
),然后显示第一页。用户可以使用寻呼机浏览数据页面。
如果值为num
你显示的已经是唯一的(每一行都有不同的值)那么你不需要添加 id
属性(property)mydata
大批。而不是你可以添加 key: true
num
定义中的属性colModel
中的列.之后 jqGrid 将使用 num
中的值列为“rowid”(id
属性的值分配给 <tr>
网格元素)。
此外,我建议您使用 gridview: true
所有网格中的选项并删除 index
来自 colModel
如果您使用与 name
相同的值.顺便说一句,如果您使用数据类型:“本地”,您必须要么删除 index
或为 index
指定相同的值和 name
.
所以最终的代码可能像下面这样
var mydata = [
{ num: "492", name: "Doug Anderson", trade: "WS" },
{ num: "696", name: "William Anderson", trade: "OP" },
{ num: "826", name: "Chris Autry", trade: "WF" },
{ num: "206", name: "Tom Beffa", trade: "OP" },
{ num: "799", name: "Glenn Bixler", trade: "LB" },
{ num: "360", name: "Pete Bober", trade: "OP" },
{ num: "7", name: "Scott Burgie", trade: "PFW" },
{ num: "476", name: "James Click", trade: "W" },
{ num: "775", name: "Bryan Darst", trade: "LB" },
{ num: "249", name: "Bob Dunham", trade: "LB" },
{ num: "10", name: "Tom Ekclund", trade: "WGF" },
{ num: "390", name: "Noel Edwards", trade: "W" }
];
$("#employees").jqGrid({
datatype: "local",
data: mydata,
colNames: ["Employee #", "Name", "Trade"],
colModel: [
{ name: "num", width: 100, key: true, sorttype: "int" },
{ name: "name", width: 300 },
{ name: "trade", width: 80 },
],
multiselect: true,
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "num",
sortorder: "desc",
viewrecords: true,
autoencode: true,
height: "auto",
gridview: true,
caption: "Equipment"
});
我修复了小错误:你指定了 height
属性两次(height: 250
和 height: 'auto'
),这是一个错误。
关于javascript - 在我更改 View 之前 JQGrid 寻呼机不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17838363/