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

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

Answer 2

这些是关于JQGrid和IE＆gt; = 7的一般观察。我见过你的示例页面，其中许多都不会影响你的具体情况。

IE无法很好地处理大型JavaScript - 保持您的javascript较小，并且加载 jqgrid更快。
加载网格时不传递html元素，在加载改善初始加载速度后构建它们。
如果可以 - 使用分页，这将改善加载速度和交互式状态。
您可以立即加载整个网格数据并仍然包含分页 - 无需多次调用服务器。这将减慢初始加载速度，但会提高分页速度。
如果可以，请将此<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />添加到您的HTML头部。它将在IE 7模式下运行IE 8，我发现使用JQGrid可以更快地运行。
jquery中的事件传播，因此向具有子项的父项添加事件侦听器也会在子项上激活该事件。与其他DOM对象交互时，请记住这一点。 Jquery .hover阻止传播。
这是一个重要的问题 - ：IE浏览器中的悬停速度很慢，在IE 8中真的很慢！
Jquery主题滚动 - 交互状态部分使用：将鼠标悬停在标签上并在悬停时插入背景图像，删除时会提高我的性能。因此，例如background: #5d5f69 url(/content/images/ui-bg_flat_75_5d5f69_40x100.png) 50% 50% repeat-x;应为background: #5d5f69;这样可以改善交互式状态。

让我知道你的发现 - 我仍然在寻找提高网格速度的方法。

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

2 个答案: