提高 jQGrid 性能
Increase jQGrid Performance
您好,我正在使用 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 格式化程序代码 -
这里没有使用foramtoptionsurl和cellattr
只有我应用 class 使其看起来像 link(我只是在 class 中使文本下划线和光标指向指针)并调用函数 getPopup 打开模式 window
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 + '"';
};
}
抱歉,您使用的大多数技巧应该没有价值,treedatatype: "jsonstring"
的用法应该是不正确的。 TreeGrid 在初始化时重新设置了很多参数,因为确实需要一些特定的值。有关更多详细信息,请参阅代码 the lines。例如,loadonce: true
只有在从服务器(datatype: "json"
或 datatype: "json"
)加载数据的情况下才有一些价值 和 不适用于 TreeGrid。我建议您删除许多未使用的选项以清理您的代码。选项 gridview
、loadonce
、rowList
、rowNum
、grouping
、sortable
、treedatatype
与 jsonReader
(或者可能是整个 jsonReader
)应该被删除。
现在谈谈你的主要问题。我只看到两种提高 TreeGrid
性能的方法
- 从 4.1.2 升级到 free jqGrid 4.10.0。它提高了 creating/loading 网格的性能,并从根本上提高了 collapsing/expanding 节点的性能。
- 创建并填充隐藏 TreeGrid,然后使其可见。您可以将用于网格的
<table>
放置在 div 内部。 div 的宽度应与 window 的宽度相对应。 div 应该是可见的。您应该使用 jQuery.width
获取 div 的宽度,并将 teh 值用作 jqGrid 的 width
值。然后你隐藏div jQuery.hide
。现在您可以创建不可见的 TreeGrid。最后,您应该使外部 div 可见,并且 TreeGrid 也将可见。
您好,我正在使用 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 格式化程序代码 -
这里没有使用foramtoptionsurl和cellattr
只有我应用 class 使其看起来像 link(我只是在 class 中使文本下划线和光标指向指针)并调用函数 getPopup 打开模式 window
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 + '"';
};
}
抱歉,您使用的大多数技巧应该没有价值,treedatatype: "jsonstring"
的用法应该是不正确的。 TreeGrid 在初始化时重新设置了很多参数,因为确实需要一些特定的值。有关更多详细信息,请参阅代码 the lines。例如,loadonce: true
只有在从服务器(datatype: "json"
或 datatype: "json"
)加载数据的情况下才有一些价值 和 不适用于 TreeGrid。我建议您删除许多未使用的选项以清理您的代码。选项 gridview
、loadonce
、rowList
、rowNum
、grouping
、sortable
、treedatatype
与 jsonReader
(或者可能是整个 jsonReader
)应该被删除。
现在谈谈你的主要问题。我只看到两种提高 TreeGrid
性能的方法- 从 4.1.2 升级到 free jqGrid 4.10.0。它提高了 creating/loading 网格的性能,并从根本上提高了 collapsing/expanding 节点的性能。
- 创建并填充隐藏 TreeGrid,然后使其可见。您可以将用于网格的
<table>
放置在 div 内部。 div 的宽度应与 window 的宽度相对应。 div 应该是可见的。您应该使用jQuery.width
获取 div 的宽度,并将 teh 值用作 jqGrid 的width
值。然后你隐藏divjQuery.hide
。现在您可以创建不可见的 TreeGrid。最后,您应该使外部 div 可见,并且 TreeGrid 也将可见。