为什么gridview:true用于它是什么意思？

Question

我正在研究JqGrid.

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

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

我最近正在研究一个这样的jqGrid并且我afterInsertRow没有被调用,一旦我重新启动了gridview:true现在的呼叫.

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

请指导我这个.

Answer 1

我同意gridview: true文档中没有很好地解释选项.在某些情况下(如TreeGrid的情况),将自动设置选项.所以我试着解释它的含义以及为什么我建议总是使用该gridview: true选项而从不使用afterInsertRow.

许多人从一些其他计算机语言开始作为JavaScript,并编写了他的第一个程序,在他们有一些程序编写风格之后在web浏览器中运行.我3年前遇到同样的问题.在HTML页面上进行一些更改后,了解Web浏览器必须执行的操作非常重要.在使用jQuery时,你永远都会这样做.

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

如上所述,提高Web浏览器性能的主要思想是减少页面上的更改次数.因此,您需要在一次操作中更改一个DOM元素的5种样式.您可以使用jQuery.css({...})所有已更改的样式而不是5个单独的调用.更好的方法是定义一个CSS类和使用jQuery.addClass方法.

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

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

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

确切地说,我应该提到,我之前描述的性能下降只有在大网格的情况下才能看到,并且在网络浏览器速度慢的情况下(如Internet Explorer,尤其是旧版本的IE),大多数情况下都会看到.

Answer 2

按照jqGrid的文件为gridview:

在包含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限制更加细微,并且未在代码中明确调出.