我同意gridview: true
文档中没有很好地解释选项。在某些情况下(例如 TreeGrid 的情况)该选项将自动设置。所以我尝试解释它的含义以及为什么我建议始终使用gridview: true
选项和从不使用afterInsertRow
.
许多人从 JavaScript 等其他计算机语言开始,在掌握了某种程序编写风格后,编写了第一个在网络浏览器中运行的程序。三年前我也遇到过同样的问题。在 HTML 页面上进行一些更改后,了解 Web 浏览器必须执行的操作非常重要。在使用 jQuery 时,这是你永久要做的事情。
如果更改页面上的某些 DOM 元素,则页面上存在的所有其他 DOM 元素的位置都会更改。如果你考虑浮动模型(比如float: left
)或许多其他 CSS 设置,您将了解 Web 浏览器不能仅移动现有页面的位图表示并插入新的插入元素。所以Web 浏览器必须重新计算页面上存在的所有元素的位置,并从另一个位置的元素中移动一些元素。即使您更改元素的 CSS 样式,也会发生所谓的回流。我建议你阅读文章 https://developers.google.com/speed/articles/reflow并观看有关该主题的视频。
上述案例中提高网络浏览器性能的主要思想是减少变更次数在页面上。因此,如果您需要更改一个 DOM 元素的 5 种样式,您应该在一次操作中完成此操作。您可以使用jQuery.css({...})
包含所有更改的样式,而不是 5 个单独的调用。更好的方法是定义一个 CSS 类并使用jQuery.addClass
method.
如果是jqGrid则需要填写<tbody>
与网格的所有行和单元格。如果你使用gridview: true
选项然后 jqGrid 将所有行的内容收集为带有 HTML 片段的字符串。稍后jqGrid调用jQuery.append
in the line https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid.base.js#L1424内部设置innerHTML
属性来设置页面上的整个 HTML 片段。
由于同样的原因,您应该使用cellattr
, rowattr
or 自定义格式化程序 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter它适用于代表单元格或行的 HTML 片段作为字符串。最后,这些字符串将被附加到其他字符串并用于jQuery.append
像我上面描述的操作。
的用法afterInsertRow
回调函数要求网格的每一行都会placed在调用之前的页面上afterInsertRow
打回来。所以它使得不可能使用gridview: true
选项并使页面运行缓慢。
确切地说,我应该提到的是,我之前描述的性能下降仅在大型网格的情况下才可见,并且在缓慢的 Web 浏览器(例如 Internet Explorer,尤其是旧版本的 IE)的情况下会非常明显。