增加jQGrid性能

时间:2017-04-09 06:39:13

标签: javascript jquery jqgrid

您好我正在使用jQGrid免费版4.1.2,我在加载树网格时遇到问题。我将数据存储在数组对象中并将其加载到树形网格中。当我加载少量数据时,它工作正常,但是当数据更多时,渲染(在列中设置数据)需要花费很多时间。我的数组对象的长度大约是1700。

我使用以下属性加载网格

 grid.jqGrid({
            datatype: "jsonstring",
            datastr: mydata,  //array object
            colNames: scopes.gridheadercolumns, //passed externally
            colModel: scopes.gridcolumns,      
            height: height, //passed externally
            gridview: true,
            loadonce: false,
            viewrecords: viewrecordslist,
            rowList: rowlists,
            rowNum: rowNum,
            multiSort: true,
            ignoreCase: true,
            grouping: gpenable,
            sortorder: sortorder,  //passed externally
            autowidth: true,
            sortable: false,
            pager: "#" + pagerid,   //passed externally
            treeGrid: true,
            treeGridModel: 'adjacency',
            treedatatype: "local",
            ExpandColumn: 'name',
            sortname: 'name',
            jsonReader: {
                repeatitems: false,
                root: function (obj) { return obj; },
                page: function () { return 1; },
                total: function () { return 1; },
                records: function (obj) { return obj.length; },
                expanded_field: "true"
            },
            loadComplete: function () {
                var ts = this;

                if (ts.p.reccount === 0) {
                    $(this).hide();
                    emptyMsgDiv.show();
                } else {
                    $(this).show();
                    emptyMsgDiv.hide();
                }

            }
        });

我已更改了上述某些属性

loadonce: true,
gridview: false,
treedatatype :"jsonstring" 

我可以从函数中删除哪个属性以使其加载更快,或者我还需要做些什么来提高性能。

此外,此问题在IE 11中特别发生。不在其他浏览器中。

任何帮助将不胜感激。感谢

编辑:我忘了包含一点,当我们加载多次时,网格也变得相当慢。我们如何确保性能不会因多个请求而降低。

tdynamicLink Formatter的代码 -

这里没有使用foramtoptions url和cellattr。

只有我应用一个类使它看起来像一个链接(我只是将文本下划线和光标指向该类中的指针)并调用函数 getPopup 来打开模态窗口

 if (formatter == "editLink") {

                    var subpopup = grid_row_data[j]._attr.popupid._value;
                    var xmlname = grid_row_data[j]._attr.popxml._value;
                    formatter= 'dynamicLink';
                    formoption= {
                            url: function (cellValue, rowId, rowData) {
                                return '/' + rowId + '?' + $.param({
                                tax: rowData.col_nigo,
                                invdate: rowData.col_igo_nigo,
                                closed: rowData.col_phireq
                            });
                        },
                        cellValue: function (cellValue, rowId, rowData) {
                            return  '<span class="pointer">' + cellValue + '</span>'; 
                            },
                        onClick: function (rowId, iRow, iCol, cellValue, e) {
                            $("#"+subpopup).css("display", "block");
                            $("#" + popupid).css("opacity", "0.99");
                            $scope.getPopup(rowId, iRow, iCol,gridid ,xmlname,rowId);                      
                        }
                    };
                    cellattr = function (rowId, cellValue, rawObject) {
                        var attribute = ' title="' + rawObject.name;
                        if (rawObject.closed) {
                            attribute += ' (closed)';
                        }
                        return attribute + '"';
                    };
            }

1 个答案:

答案 0 :(得分:1)

很抱歉,但您使用的大多数技巧都没有价值,treedatatype: "jsonstring"的用法应该不正确。 TreeGrid在初始化期间重置了许多参数,因为确实需要一些特定的值。有关详细信息,请参阅代码的the lines。例如,loadonce: true仅在从服务器(datatype: "json"datatype: "json"加载数据时才具有某些值,而不是TreeGrid。我建议您删除许多未使用的选项来清理代码。选项gridviewloadoncerowListrowNumgroupingsortabletreedatatype与{的大部分属性相同{1}}(或可能是整个jsonReader)应该删除。

现在谈谈你的主要问题。我只看到两种提高TreeGrid性能的方法

  1. 从4.1.2升级到free jqGrid 4.10.0。它提高了创建/加载网格的性能,并且实质上提高了节点的折叠/扩展性能。
  2. 创建并填充隐藏 TreeGrid,然后将其显示。您可以在div中放置用于网格的jsonReader。 div应该具有与窗口宽度相对应的宽度。 div应该是可见的。您应该使用<table>获取div的宽度,并使用teh值作为jqGrid的jQuery.width值。然后你<{>>隐藏div ,关注width。现在您可以创建不可见的TreeGrid。最后,您应该使外部div可见,并且TreeGrid也将可见。
相关问题