jqGrid multiselect对于大型本地数据和jQueryUI 1.8非常慢,jQueryUI 1.7很好

Question

我在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并选择了所有选项.

从谷歌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将非常感激.

Answer 1

"很高兴"看到有同样问题的人.

我打开你的例子并点击行或复选框在UI 1.8中表现不佳.

我们(php项目,本地存储在JSON变量中的数据,本地处理(排序,过滤),没有分页,一次最多1000条记录)遇到了同样的问题,但还没有找到解决方案.UI 1.7在任何浏览器中都表现不错,但随着1.8的变化我们注意到只有firefox(3.6,没有测试的低版本)的一些重大性能问题.IE6,我们其他支持的浏览器工作正常(至少这次:-)

我试图找出这个问题的根源,并使用firebug来分析点击后调用的不同函数的运行时.我知道jquery对不同的浏览器(规范化)有不同的事件处理,但如果这有任何影响,我不知道.

结果可以在这里找到: profile.png

也许你在这个列表中看到任何明显的东西.

由于我们也没有找到任何解决方案,我们降级到UI 1.7.3(这会产生其他但很小的问题).

凯

编辑:您是否在jqGrid论坛中报告了此问题？大多数问题至少会被接近.

edit2:好的,经过一些进一步的调查和一些研究,我发现了一个解决方法.如此处所述(http://www.trirand.com/blog/?page_id=393/bugs/compatibility-bug-with-jquery-ui-1-8-4/),问题可以(暂时)通过从UI的css中删除以下行:

.ui-widget :active { outline: none; }

我可以确认删除此行后不再存在性能问题.由于此规则对我们的风格没有影响,因此解决方法成为我们的修复...... :-)