jqGrid tuning－火星人秘密基地

jqGrid是jquery的grid widget中, 功能比較完整的一個, api document也很完整。

jqGrid example

開始的時候, 來測試一下 insert data

100筆740ms 很順

1,000筆 5.56s, 這開始有點慢了

var allVals = [];
for(var i=0;i<=3000;i++){
   var obj = new Object();
   obj.id = i;
   obj.invdate = "2012-12-02";
   obj.name = "test" + (i + 1);
   obj.amount = Math.ceil(Math.random()*10);
   allVals.push(obj);
}
$.each(allVals, function(key, obj){
	jQuery("#gfrc1").jqGrid('addRowData', obj.id, obj);
});

3,000筆 17.21s, 這就慢的有點受不了

before

因為我們用local data來測試, 所以速度較快, 實際使用狀況下會更慢, 所以以3000筆狀況來tune, 可以部份模擬實際網路抓取grid資料使用的情況。

如果jqGrid可以一次set data, 那速度的瓶頸勢必可以改善很多, 看了api找來找去, 原來在原本的addRowData這個method, 可以一次insert所有data。

This method can insert multiple rows at once. In this case the data parameter should be array defined as
[{name1:value1,name2: value2…}, {name1:value1,name2: value2…} ] and the first option rowid should contain the name from data object which should act as id of the row. It is not necessary that the name of the rowid in this case should be a part from colModel.

所以把insert的迴圈改成

var allVals = [];
for(var i=0;i<=3000;i++){
   var obj = new Object();
   obj.id = i;
   obj.invdate = "2012-12-02";
   obj.name = "test" + (i + 1);
   obj.amount = Math.ceil(Math.random()*10);
   allVals.push(obj);
}
$("#gfrc1").jqGrid('addRowData', 'id', allVals);

這樣即可, 測試一下改善的效果如何。

tuned