10

我正在研究 JqGrid。

我想知道如果我们指定gridview:true.

在什么情况下我们需要提供？

我最近正在研究一个这样的 jqGrid 并且我afterInsertRow没有被调用，一旦我删除了gridview:true现在调用。

这是我自己经历过的一个案例，我想知道是否还有其他案例我们应该知道是否gridview:true使用过。

请指导我。

4

2 回答 2

14

我同意该gridview: true选项在文档中没有得到很好的解释。在某些情况下（例如在 TreeGrid 的情况下）该选项将被自动设置。因此，我尝试解释它的含义以及为什么我建议始终使用该gridview: true选项和从不使用afterInsertRow.

许多人从其他一些计算机语言开始，例如 JavaScript，并在他们具有某种程序编写风格后编写了他的第一个在 Web 浏览器中运行的程序。3年前我有同样的问题。在对 HTML 页面进行一些更改后，了解 Web 浏览器必须执行的操作非常重要。在使用 jQuery 时，这是你永久要做的事情。

如果您更改页面上的某些 DOM 元素，则可以更改页面上存在的所有其他 DOM 元素的位置。如果您考虑浮动模型（如 with float: left）或许多其他 CSS 设置，您将了解 Web 浏览器不能仅移动现有页面的位图表示并插入新插入的元素。因此，网络浏览器必须重新计算页面上存在的所有元素的位置，并从另一个位置的元素中移动一些元素。即使您更改元素的 CSS 样式，也会发生所谓的重排。我建议您阅读文章并观看有关该主题的视频。

在上述情况下，提高网络浏览器性能的主要思想是减少页面上的更改次数。因此，您是否需要更改一个 DOM 元素的 5 种样式，您应该在一次操作中执行此操作。您可以使用jQuery.css({...})所有更改的样式，而不是 5 个单独的调用。更好的办法是定义一个 CSS 类和使用jQuery.addClass方法。

在 jqGrid 的情况下，需要填充<tbody>网格的所有行和单元格。如果您使用gridview: true选项，则 jqGrid 将所有行的内容收集为带有 HTML 片段的字符串。jQuery.append稍后在设置内部属性的行中调用 jqGridinnerHTML以设置页面上的整个 HTML 片段。

由于同样的原因，您应该使用与 HTML 片段一起使用的自定义格式化程序cellattr将单元格rowattr或行表示为字符串。最后，这些字符串将被附加到其他字符串，并将像我上面描述的那样在操作中使用。jQuery.append

回调函数的使用要求在调用回调之前afterInsertRow将网格的每一行放置在页面上。afterInsertRow因此，无法使用gridview: true选项并使页面的工作缓慢。

确切地说，我应该提到我之前描述的性能下降只有在大网格的情况下才可见，并且在网络浏览器速度较慢的情况下（如 Internet Explorer，尤其是旧版本的 IE）大部分情况下都可以清楚地看到。

于 2012-09-20T19:48:27.033 回答
5

根据jqGridgridview文档：

在包括 3.4.X 在内的 jqGrid 之前的版本中，读取相对较大的数据集（行数 >= 100 ）会导致速度问题。这样做的原因是，当每个单元格被插入到网格中时，我们对其应用了大约 5 到 6 次 jQuery 调用。现在这个问题解决了；我们现在使用 jQuery 追加一次插入条目行。结果令人印象深刻 - 大约快 3 到 5 倍。如果我们一次插入所有数据，结果会怎样？是的，这可以在 gridview 选项的帮助下完成（将其设置为 true）。结果是网格速度提高了 5 到 10 倍。当然，当此选项设置为 true 时，我们会有一些限制。如果设置为 true，我们将无法使用 treeGrid、subGrid 或 afterInsertRow 事件. 如果您不在网格中使用这三个选项，您可以将此选项设置为 true 并享受速度。

因此，通过使用此选项，您可以获得不错的速度提升，但需要注意的是它与 treeGrid、subGrid 或afterInsertRow. 我相信这就是局限的程度。如果您发现更多，请告诉我们，以便更新文档。

对于它的价值，您实际上可以看到方法中的特定情况 以及跳过的位置：grid.base.jsaddXmlDataaddJSONDataafterInsertRow

if(ts.p.gridview === false ) {
    $("tbody:first",t).append(rowData.join(''));
    $(ts).triggerHandler("jqGridAfterInsertRow", [rid, rd, xmlr]);
    if(afterInsRow) {ts.p.afterInsertRow.call(ts,rid,rd,xmlr);}
    rowData=[];
}

treeGrid 和 subGrid 的限制更加微妙，并且没有在代码中显式调用。

于 2012-09-20T19:22:34.530 回答