jqGrid添加数据行addRowData慢解决

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

  

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

 

100筆740ms 很順

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

?

1 2 3 4 5 6 7 8 9 10 11 12

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, 這就慢的有點受不了

    

因為我們用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的迴圈改成

?

1 2 3 4 5 6 7 8 9 10

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);

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

  

這樣速度進步到2.97s, 以3,000這樣的資料量來說, 速度還可以接受。