为什么是gridview:真正用于和是什么意思?
我正在JqGrid上工作。
我想知道这是什么意思,如果我们指定gridview:true
。
而在什么情况下,我们需要提供?
我最近正在做一个这样的jqGrid,我的afterInsertRow
没有被调用,一旦我调用了gridview:true
现在调用了。
这是我自己经历过的一种情况,我想知道是否还有其他的情况,我们应该知道是否使用了gridview:true
。
请在这里指导我。
我同意在文档中解释gridview: true
选项不好。 在某些情况下(如TreeGrid的情况下),选项将被自动设置。 所以我试图解释它是什么意思,为什么我build议总是使用gridview: true
选项,而不要使用afterInsertRow
。
很多人开始使用JavaScript等其他计算机语言编写自己的第一个在网页浏览器中运行的程序,他们有一定的程序编写风格。 三年前我也有同样的问题。 在HTML页面上进行一些更改后,了解Web浏览器必须执行的操作非常重要 。 在使用jQuery的使用这是你永久做的事情。
如果您更改页面上的某个DOM元素,则可以更改该页面上存在的所有其他DOM元素上的位置。 如果你考虑漂浮模型(比如float: left
)或者其他许多CSS设置,你会明白,Web浏览器不能移动现有页面的位图表示,并插入新插入的元素。 所以networking浏览器必须重新计算页面上存在的所有元素的位置,并从另一个地方的元素移动一些元素 。 即使您更改元素的CSS样式,也会发生如此名称的重排。 我build议你阅读这篇文章,并看看关于这个主题的video。
上述情况下提高网页浏览器性能的主要思想是减less网页上的变化次数 。 所以你需要改变一个DOM元素的5种风格,你应该在一个操作中做到这一点。 您可以使用jQuery.css({...})
,而不是5个独立的调用。 更好的办法是定义一个CSS类并使用jQuery.addClass
方法。
在jqGrid的情况下,需要用网格的所有行和单元填充<tbody>
。 如果使用gridview: true
选项,则jqGrid将所有行的内容作为带有HTML片段的string来收集。 后来jqGrid在内部设置了innerHTML
属性的行中调用jQuery.append
来设置页面上的整个HTML片段。
由于相同的原因,您应该使用cellattr
, rowattr
或与HTML片段一起工作的自定义格式化程序将单元格或行表示为string 。 最后,string将被附加到其他string,并将用于jQuery.append
操作,如上所述。
afterInsertRow
callback函数的用法要求在调用afterInsertRow
callback函数之前,网格的每一行都放在页面上。 所以使gridview: true
选项的使用变得不可能,并且使页面缓慢工作。
准确地说,我应该提到,我之前描述的性能下降只有在大网格的情况下才可见,并且在慢速浏览器(如Internet Explorer,特别是IE的旧版本)的情况下将大部分清楚可见。
根据gridview
的jqGrid文档 :
在以前版本的包括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.js
方法addXmlData
和addJSONData
中实际看到特定的情况 ,其中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限制更加微妙,并且在代码中没有显式调用。