我在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的网格速度如此之慢,我将不胜感激。
2条答案
按热度按时间ffvjumwh1#
“很高兴”看到有人有同样的问题。
我打开了你的例子,点击行或复选框在UI 1.8中表现不佳。
我们(php项目,数据本地存储在JSON变量中,本地处理(排序,过滤),没有分页,一次多达1000条记录)面临着同样的问题,还没有找到解决方案。UI 1.7在任何浏览器上都表现良好,但随着1.8的变化,我们注意到只有Firefox(3.6,没有测试更低版本)存在一些严重的性能问题。IE6,我们支持的其他浏览器工作正常(至少这一次:-)
我试图找出这个问题的根源,并使用firebug分析了单击后调用的不同函数的运行时。我知道jquery对不同的浏览器有不同的事件处理(规范化),但我不知道这是否有任何影响。
结果可以在这里找到:profile.png
你可能会在这个列表中看到一些值得注意的东西。
由于我们也没有找到任何解决方案,我们降级到UI 1.7.3(它带来了其他但较小的问题)。
卡伊
edit:你在jqGrid论坛上报告过这个问题吗?大多数问题至少会得到解决。
edit 2:好的,经过进一步的调查和研究,我找到了一个解决方案。如这里所描述的(http://www.trirand.com/blog/?page_id=393/bugs/compatibility-bug-with-jquery-ui-1-8-4/),这个问题可以通过从UI的css中删除以下行(暂时)解决:
我可以确认删除这一行后不再有性能问题。由于这条规则对我们的风格没有影响,所以变通方案对我们来说是一个解决方案...:—)
jei2mxaa2#
这些是我对JQGrid和IE >= 7的一般观察。我看过你的例子页面,其中许多不会影响你的具体情况。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
到你的html的头部。它将在IE7模式下运行IE8,我发现使用JQGrid更快。*这是一个很重要的问题:IE中的悬停很慢,在IE8中真的很慢!
background: #5d5f69 url(/content/images/ui-bg_flat_75_5d5f69_40x100.png) 50% 50% repeat-x;
应该是background: #5d5f69;
,这改善了交互状态。让我知道你的发现-我仍然在寻找方法来提高我的网格速度了。