为什么使用 gridview:true 以及它是什么意思？

Question

我正在研究 JqGrid。

我想知道如果我们指定gridview:true是什么意思。

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

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

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

请指导我。

Answer 1

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

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

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

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

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

出于同样的原因，您应该使用cellattr、rowattr 或custom formatters，它们适用于将单元格或行表示为字符串的 HTML 片段。最后，字符串将被附加到其他字符串，并将用于jQuery.append 操作，就像我在上面描述的那样。

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

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

Answer 2

根据jqGrid documentation为gridview：

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

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

---

对于它的价值，您实际上可以在 grid.base.js 方法 addXmlData 和 addJSONData 中使用 see specific cases afterInsertRow 被跳过：

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 的限制更加微妙，并且没有在代码中明确指出。