jqGrid的多项选择与本地大型数据和jQueryUI的1.8很慢，jQueryUI的1.7是罚款 [英] jqGrid multiselect is very slow with large local data and jQueryUI 1.8, jQueryUI 1.7 is fine
问题描述
我在ASP.NET页面中使用的jqGrid和注射datainto网页上的脚本块，然后从那里加载。对于这个一个用例是必要的，我们有大量的在屏幕上可见数据的一次。其中涉及300〜500条记录与每行30列。寻呼这种情况下是不是一个不错的选择。用户需要能够扫描数据的质量量，选择40〜60行，然后移动到另一屏幕。
I am using jqGrid in an ASP.NET page and injecting the datainto a script block on the page and then loading from there. For this one use case it is necessary that we have a large amount of data visible on the screen at once. which involves 300~500 records with 30 columns on each row. Paging for this case is not a good fit. The user needs to be able to scan the mass amount of data, select 40~60 rows and then move off to another screen.
我不确定这是否会是一个非常适合在jqGrid的乞讨，但在原型一切都足够快足够了。然而移至生产是在多选模式十分缓慢。
I was unsure if this would be a good fit in the begging for jqGrid but in prototyping everything worked plenty fast enough. However moving to production it is painfully slow in the multi-select mode.
我已经痛点缩小到1.8 jQueryUI的。如果我恢复只是回jQueryUI的1.7就足够速度不够快。
I have narrowed down the pain point to jQueryUI 1.8. If I revert just that back to jQueryUI 1.7 it is plenty fast enough.
例如jQueryUI的1.7〜 17.htm
example of jQueryUI 1.7 ~ 17.htm
例如jQueryUI的1.8〜 18.htm
example of jQueryUI 1.8 ~ 18.htm
请注意：该示例显示了差异Firefox和IE最多的，镀铬似乎确定
note: the examples show the difference the most in FireFox and IE, Chrome seems ok
这两个页面使用与选择的所有选项最新的jqGrid 3.8。
Both pages use the latest jqGrid 3.8 with all options selected.
从谷歌CDN装载jQuery和jQueryUI的
loading jQuery and jQueryUI from the google CDN
<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>
从我的服务器加载JS的jqGrid / CSS
loading jqGrid JS / CSS from my server
<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的设置通话
My basic jqGrid setup calls
$(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 VS jQueryUI的1.7这么慢会大大AP preciated。
If anyone has some insight why the grid is so slow with jQueryUI 1.8 vs jQueryUI 1.7 would be much appreciated.
推荐答案
很高兴看到有人用同样的问题。
"Nice" to see someone with the same problem.
我打开了你的行为例，单击或复选框与UI 1.8表现不好。
I opened your example and clicking on rows or checkbox performs badly with UI 1.8.
我们（PHP项目，储存在本地的JSON变量数据，本地处理（排序，筛选），无分页，多达1000条记录一次）面临着同样的问题，并没有找到一个解决办法呢。 UI 1.7在任何浏览器执行不错，但与变化到1.8，我们只用火狐注意到一些沉重的性能问题（3.6，不低于版本测试）。 IE6，我们的其他支持的浏览器正常工作（至少在这个时候： - ）
We (php project, data locally stored in a JSON-variable, locally processed (sorting, filtering), no paging, up to 1000 records at once) were faced with the same problem and did not find a solution yet. UI 1.7 performs nice in any browser, but with the change to 1.8 we noticed some heavy performance issues with only firefox (3.6, no lower version tested). IE6, our other supported browser works fine (at least this time :-)
我试图找出此问题的根源并用萤火虫来分析的点击后调用各种功能的运行时间。我知道有一个不同的事件的jQuery为不同的浏览器（标准化）处理，但我不knwow如果有任何的影响。
I tried to find out the root of this problem and used firebug to profile the runtime of different functions called after the click. I know there is a different event handling by jquery for different browsers (normalization), but I do not knwow if this has any impact.
结果可以在这里找到：
profile.png
The result can be be found here: profile.png
也许你看到在此列表中的任何明显的。
Maybe you see anything noticeable in this list.
由于我们还没有找到任何解决这个问题，我们降级到1.7.3 UI（这与其他但是小问题出现）。
As we also did not find any solution to this, we downgraded to UI 1.7.3 (which comes up with other but minor problems).
开
编辑：你在jqGrid的论坛中报告这个问题？大多数问题将至少接近。
edit: Did you report this problem in the jqGrid forum? Most problems will be at least approached.
EDIT2：好的，经过一些进一步的调查和一些研究，我发现一个解决办法。如这里所描述（http://www.trirand.com/blog/?page_id=393/bugs/compatibility-bug-with-jquery-ui-1-8-4/），问题可以是（暂时地）通过求解从UI的CSS删除以下行：
edit2: Ok, after some further investigations and some research I found a workaround. As described here (http://www.trirand.com/blog/?page_id=393/bugs/compatibility-bug-with-jquery-ui-1-8-4/), the problem can be (temporarily) solved by removing the following line from the UI's css:
.ui-widget :active { outline: none; }
我可以证实，删除此行后没有性能问题了。由于此规则有我们的风格没有影响，解决办法成为我们一个修复...： - ）
I can confirm that there's no performance issue anymore after removing this line. As this rule has no effect to our style, the workaround becomes a fix for us... :-)
这篇关于jqGrid的多项选择与本地大型数据和jQueryUI的1.8很慢，jQueryUI的1.7是罚款的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
