我在 ASP.NET 页面中使用 jqGrid 并将数据注入到页面上的脚本块中,然后从那里加载。对于这一用例,我们需要立即在屏幕上显示大量数据。其中涉及 300~500 条记录,每行 30 列。对于这种情况,分页不太合适。用户需要能够扫描大量数据,选择 40~60 行,然后移至另一个屏幕。
我不确定这是否适合 jqGrid 的需求,但在原型设计中,一切都运行得足够快。然而,在多选模式下,转向生产却非常缓慢。
我已将痛点范围缩小到 jQueryUI 1.8。如果我将其恢复到 jQueryUI 1.7,它已经足够快了。
jQueryUI 1.7 示例 ~17.htm
jQueryUI 1.8 的例子~18.htm
注意:示例显示 FireFox 和 IE 中的差异最大,Chrome 似乎还可以
两个页面都使用最新的 jqGrid 3.8,并选择了所有选项。
从 google CDN 加载 jQuery 和 jQueryUI
<base href="http://ajax.googleapis.com/" />
<link href="/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" type="text/css" />
<script src="/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
从我的服务器加载 jqGrid JS / CSS
<link type="text/css" href="http://mymx.biz/jqGrid/ui.jqgrid.css" />
<script src="http://mymx.biz/jqGrid/grid.locale-en.js" type="text/javascript"></script>
<script src="http://mymx.biz/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
和我的大型本地数据集
<script src="http://mymx.biz/jqGrid/getGridData.js?v=1" type="text/javascript"></script>
数据集中的示例行
var gridData = [
{id:"1",aa:"aa1",bb:"bb1",cc:"cc1",dd:"dd1",ee:"ee1", ff:"ff1",
gg:"gg1", hh:"hh1", ii:"ii1", jj:"jj1", kk:"kk1", ll:"ll1", mm:"mm1", nn:"nn1"},
{...}
];
我的基本 jqGrid 设置调用
$(function () {
var gridData = getGridData(); // pulls from getGridData.js
setupGrid(gridData);
});
function SelectRow(rowid) {
// I will be firing AJAX calls here in the future
console.log("rowid: " + rowid);
}
function setupGrid(gridData) {
$("#testGrid").jqGrid({
data: gridData,
height: 'auto',
rowNum: gridData.length,
multiselect: true,
datatype: 'local',
multiboxonly: false,
gridview: true, // not sure if this is needed since jqGrid 3.6
onSelectRow: function (rowid) { SelectRow(rowid); },
colNames: ['id', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff',
'gg', 'hh', 'ii', 'jj', 'kk', 'll', 'mm', 'nn'],
colModel: [
{ name: 'id', width: 40 },
{ name: 'aa', width: 40 },
{ name: 'bb', width: 40 },
{ name: 'cc', width: 40 },
{ name: 'dd', width: 40 },
{ name: 'ee', width: 40 },
{ name: 'ff', width: 40 },
{ name: 'gg', width: 40 },
{ name: 'hh', width: 40 },
{ name: 'ii', width: 40 },
{ name: 'jj', width: 40 },
{ name: 'kk', width: 40 },
{ name: 'll', width: 40 },
{ name: 'mm', width: 40 },
{ name: 'nn', width: 40 }
],
caption: "Test Grid"
});
}
如果有人知道为什么 jQueryUI 1.8 与 jQueryUI 1.7 的网格速度如此之慢,我们将不胜感激。