jqGrid花费很长时间处理大型记录 [英] jqGrid Taking Long Time For Large Records
问题描述
我正在使用jgGrid。它的工作完美，但是当我传递大约90,000条记录并在谷歌浏览器中打开页面时，大约需要8秒来创建一个网格，在我的情况下它应该接近3-4秒。而且当我在IE上运行相同的页面时，它变得没有反应。
任何建议如何减少时间？
我的脚本
函数GetCommodityGrid（array）{
array = array.rows; //将行数组赋给数组对象
totalRows = array.length;
jQuery（document）.ready（function（）{
jQuery（＃list）。jqGrid（{
datatype：'local'，
data：array，
colNames：['COM_NAME'，'COM_CODE'，'DELV_UNITS'，'LOT_SIZE'，'TICK_SIZE'，'TICK_VALUE']，
colModel：[
{name：'COM_NAME'，index： 'COM_NAME'，width：90，editable：true}，
{name：'COM_CODE'，index：'COM_CODE'，width：100，editable：true}，
{name：'DELV_UNITS'，索引：'DELV_UNITS'，width：80，align：right，editable：true}，
{name：'LOT_SIZE'，index：'LOT_SIZE'，width：80，align：right，editable： true}，
{name：'TICK_SIZE'，index：'TICK_SIZE'，width：80，align：right，editable：true}，
{name：'TICK_VALUE'，index：'TICK_VALUE '，width：150，sortable：false，editable：true}
]，
rowList：[50,100,200]，
ro wnumbers：true，//显示行上的数字
loadonce：true，
pager：'#pager'，
sortname：'COM_NAME'，
viewrecords：true，//显示页面末尾的总记录
editurl：TestGrid / EditRecord，
标题：JSON示例，
//新选项
gridview：true，
autoencode：true，
}）;
$ b $（＃list）。jqGrid（navGrid，#pager，{add：false}，
{//编辑选项
closeAfterEdit：true，
afterSubmit：function（response）{
//你应该从服务器返回确定成功，其他消息出错
alert（提交后）;
if（response.responseText ==OKK）{
alert（Update is successfulfully）
return [true，，]
}
else {
alert（更新失败）
$（＃cData）。click（）;
return [false，]
}
}
}）;
}）;
}
网格有90,000个未排序的行，并且发现了一个很容易克服的非常有趣的瓶颈。首先这里是快速工作的演示，这里几乎是相同的演示，它在IE中的运行非常缓慢。 / p>
加载jqGrid的最多时间是直接在开始的jqGrid代码行
$ b
var p = $ .extend（true，{
//这里有jqGrid参数的不同默认值
}，$ .jgrid.defaults，pin || {}） ;
因为使用 true 作为第一个参数那么jQuery会完整复制数据，并且它工作的很慢（为什么？这是另一个纯粹的jQuery问题）。
作为解决方法，我建议在创建网格时不要设置 data 参数。在使用默认参数 data：[] 的情况下。而不是那个可以在 onInitGrid 回调中设置 data
$（＃list）。jqGrid（{
// data：gridData，
datatype：local，
....
onInitGrid：function（）{
//获得对参数的引用
var p = $（this）.jqGrid（getGridParam）;
//设定数据参数
p.data = gridData;
}
}）;
因此，网格加载的性能会变得更好。
我会稍后发布我的建议，以便如何对jqGrid的代码进行小的更改以提高jqGrid的性能。我的建议很简单。可以在变量中保存 data 参数，然后调用 var p = $ .extend（true，{...}）; ，然后直接在 p 变量中设置 data 参数
//将本地数据数组保存在临时变量中并从输入参数中移除
//以提高性能
var localData;
if（pin！= null&& pin.data！== undefined）{
localData = pin.data;
pin.data = [];
}
var p = $ .extend（true，{
//这里有jqGrid参数的不同默认值
}，$ .jgrid.defaults，pin || { }）;
if（localData！== undefined）{
p.data = localData;
}
演示使用 jqGrid的固定代码，它的工作很快。
已更新：我发布给trirand的pull request 已经在github上合并到jqGrid的主代码（详见 bug报告）。所以下一个版本的jqGrid（版本高于4.6.0）不会有所描述的问题。
I am using jgGrid. Its working perfectly but when i pass about 90,000 records and open the page in google chrome it takes around 8 sec to create a grid which in my case it should be near 3-4 sec. and moreover when i run the same page on IE it became unresponsive.
Any suggestion how can i reduce the time ?
my script
function GetCommodityGrid(array) {
array = array.rows; // assign rows array to array object
totalRows = array.length;
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
datatype: 'local',
data: array,
colNames: ['COM_NAME', 'COM_CODE', 'DELV_UNITS', 'LOT_SIZE', 'TICK_SIZE', 'TICK_VALUE'],
colModel: [
{ name: 'COM_NAME', index: 'COM_NAME', width: 90, editable: true },
{ name: 'COM_CODE', index: 'COM_CODE', width: 100, editable: true },
{ name: 'DELV_UNITS', index: 'DELV_UNITS', width: 80, align: "right", editable: true },
{ name: 'LOT_SIZE', index: 'LOT_SIZE', width: 80, align: "right", editable: true },
{ name: 'TICK_SIZE', index: 'TICK_SIZE', width: 80, align: "right", editable: true },
{ name: 'TICK_VALUE', index: 'TICK_VALUE', width: 150, sortable: false, editable: true }
],
rowList: [50,100,200],
rownumbers: true, // show the numbers on rows
loadonce: true,
pager: '#pager',
sortname: 'COM_NAME',
viewrecords: true, // show the total records on the end of the page
editurl: "TestGrid/EditRecord",
caption: "JSON Example",
//new option
gridview: true,
autoencode: true,
});
$("#list").jqGrid("navGrid", "#pager", { add: false },
{ //the Edit options
closeAfterEdit: true,
afterSubmit: function (response) {
// you should return from server OK in sucess, any other message on error
alert("after Submit");
if (response.responseText == "OKK") {
alert("Update is succefully")
return [true, "", ""]
}
else {
alert("Update failed")
$("#cData").click();
return [false, "", ""]
}
}
});
});
}
I analysed process of loading local grid with 90,000 unsorted rows and have found very funny bottleneck which one can easy overcome. First of all here is the demo which works quickly and here is almost the same demo which works much slowly especially in IE.
The most time of loading jqGrid get the line of jqGrid code directly at the beggining:
var p = $.extend(true,{
// there are here different default values of jqGrid parameters
}, $.jgrid.defaults, pin || {});
Because one uses true as the first parameter then jQuery makes full copy of the data and it works slowly (why? It's another pure jQuery question).
As a workaround I suggest to set no data parameter during creating the grid. In the case the default parameter data: [] will be used. Instead of that one can set data inside of onInitGrid callback:
$("#list").jqGrid({
//data: gridData,
datatype: "local",
....
onInitGrid: function () {
// get reference to parameters
var p = $(this).jqGrid("getGridParam");
// set data parameter
p.data = gridData;
}
});
As the result the performance of loading of the grid will become much better.
I will post later my suggestions to trirand how to make small change of the code of jqGrid to improve the performance of jqGrid in the case. What I suggest is very simple. One can save data parameter in a variable, then call var p = $.extend(true,{...}); and then set data parameter directly in p variable
// save local data array in temporary variable and remove from input parameters
// to improve performance
var localData;
if (pin != null && pin.data !== undefined) {
localData = pin.data;
pin.data = [];
}
var p = $.extend(true,{
// there are here different default values of jqGrid parameters
}, $.jgrid.defaults, pin || {});
if (localData !== undefined) {
p.data = localData;
}
The demo uses the fixed code of jqGrid and it works quickly.
UPDATED: The pull request which I posted to trirand is already merged to the main code of jqGrid on github (see more in the bug report). So the next version of jqGrid (version higher as 4.6.0) won't have the described problem.
这篇关于jqGrid花费很长时间处理大型记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
