IE8 中的 Jqgrid treegrid 性能问题 [英] Jqgrid treegrid performance issues in IE8

问题描述

我正在使用 jqgrid treegrid 在展开事件时远程加载数据.它正在快速检索数据，但在客户端加载以及折叠节点需要时间，它在 IE8 上给出停止脚本错误.在 FF 和 Chrome 上，这确实需要时间，但不会出现任何脚本错误.我只有 480 条记录要显示，但 treegrid 显示出巨大的性能缺陷.折叠 FEB-2012 节点时出现 IE8 错误...

I am using jqgrid treegrid to load the data remotely on expand event. It is retrieving the data fast but it is taking time to load on client side and also on collapsing the node, it is giving stop script error on IE8. On FF and Chrome, it does take time but works with out any script errors. I only have 480 records to display but treegrid shows huge performance drawback. IE8 error on collapsing FEB-2012 node...

推荐答案

我测试了你的演示，我有一个提示可以显着提高性能.原因是 行里面expandRow:

I tested your demo and I have one tip hot to improve the performance dramatically. The reason are the line inside of expandRow:

$("#"+id,$t.grid.bDiv).css("display","");

和 另一行里面collapseRow:p>

and another line inside of collapseRow:

$("#"+id,$t.grid.bDiv).css("display","none");

这些行使用 $t.grid.bDiv 作为 jQuery 上下文参数.因此，来自 $t.grid.bDiv 的数据在不使用 id 的现有索引的情况下被搜索.如果网格没有 id 重复项(这将是数据中的错误)，则可以删除 $t.grid.bDiv 参数

The lines uses $t.grid.bDiv as the jQuery context parameter. It follows that the data from $t.grid.bDiv fill be searched without using the index existing for ids. In case of the grid has no id duplicates (which would be a bug in the data) one can remove the $t.grid.bDiv parameter

演示与您的原始演示相同，但​​我使用了上面几行替换为的函数的固定代码

The demo is identical to your original demo, but I used the fixed code of the function where the above lines are replaced to

$("#"+$.jgrid.jqID(id)).css("display","");

和

$("#"+$.jgrid.jqID(id)).css("display","none");

我使用了原来的 jqGrid 4.1.1 jquery.jqGrid.min.js，但是只重写了 expandRow 和 collapseRow 函数的代码与

I used the original jqGrid 4.1.1 jquery.jqGrid.min.js, but overwrote the code only the expandRow and collapseRow function with

$.jgrid.extend({
    expandRow: function (record){
        this.each(function(){
            var $t = this;
            if(!$t.grid || !$t.p.treeGrid) {return;}
            var childern = $($t).jqGrid("getNodeChildren",record),
            //if ($($t).jqGrid("isVisibleNode",record)) {
            expanded = $t.p.treeReader.expanded_field;
            $(childern).each(function(i){
                var id  = $.jgrid.getAccessor(this,$t.p.localReader.id);
                //$("#"+id,$t.grid.bDiv).css("display","");
                $("#"+$.jgrid.jqID(id)).css("display","");
                if(this[expanded]) {
                    $($t).jqGrid("expandRow",this);
                }
            });
            //}
        });
    },
    collapseRow : function (record) {
        this.each(function(){
            var $t = this;
            if(!$t.grid || !$t.p.treeGrid) {return;}
            var childern = $($t).jqGrid("getNodeChildren",record),
            expanded = $t.p.treeReader.expanded_field;
            $(childern).each(function(i){
                var id  = $.jgrid.getAccessor(this,$t.p.localReader.id);
                //$("#"+id,$t.grid.bDiv).css("display","none");
                $("#"+$.jgrid.jqID(id)).css("display","none");
                if(this[expanded]){
                    $($t).jqGrid("collapseRow",this);
                }
            });
        });
    }
});

我认为可以进一步提高代码的性能，但至少简单的更改可以显着提高具有许多项目的树节点的折叠或扩展性能.

I think that one can more improve performance of the code, but at least the simple change can improve dramatically the performance of collapsing or expanding of tree nodes having many items.

更新:我刚刚发布了 拉取请求它在 jqGrid 的主代码中修复了上述问题.我决定使用 $($t.rows.namedItem(id)) 而不是上面描述的 $("#"+$.jgrid.jqID(id)).我没有准确测量性能，但是 namedItem 应该是最接近原始 jqGrid 代码的，我希望它作为 jQuery 的 id 选择器工作得更快一些.

UPDATED: I posted just now the pull request which fix the described above problem in the main code of jqGrid. I decided to use $($t.rows.namedItem(id)) instead of described above $("#"+$.jgrid.jqID(id)). I didn't measure the performance exactly, but the usage of namedItem should be the most close to the original jqGrid code and I hope it works a little more quickly as id selector of jQuery.

更新 2: 修复程序现在位于 github 上 jqGrid 的主代码中(参见 这里)

UPDATED 2: The fix is now in the main code of jqGrid on the github (see here)

这篇关于IE8 中的 Jqgrid treegrid 性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！