asp.net - jqGrid 多选对于大量本地数据非常慢，jQueryUI 1.8、jQueryUI 1.7 都很好

Question

我在 ASP.NET 页面中使用 jqGrid 并将数据注入(inject)到页面上的脚本 block 中，然后从那里加载。对于这一用例，我们需要立即在屏幕上显示大量数据。其中涉及 300~500 条记录，每行 30 列。对于这种情况，分页不太合适。用户需要能够扫描大量数据，选择 40~60 行，然后移至另一个屏幕。

我不确定这是否适合 jqGrid 的需求，但在原型(prototype)设计中，一切都运行得足够快。然而，在多选模式下，转向生产却非常缓慢。

我已将痛点范围缩小到 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 的网格速度如此之慢，我们将不胜感激。

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; }

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