如何提高jqGrid的性能

我有超過1000行通過jqGrid填充數據。當我通過jqGrid填充數據時，jqGrid花費超過20秒來填充數據。此時間僅由jqGird執行（查詢執行時間和其他時間除外）。我有一個要求，通過使用jqGrid填充1000行，我不想使用分頁。請幫助我如何提高jgGrid的性能。如何提高jqGrid的性能

我們使用的版本是： jgGrid：3.6.4 jQuery的：1.4.2 jQuery用戶界面：1.7.2 瀏覽器：IE 7

以下是代碼：

jQuery("#displayItemPerformanceGrid").jqGrid({ 
    //datatype: displayItemPerformanceGridData, //json 
    url:'/DISMGMT/StandardProxy/displayItemPerformanceService?userRole='+userRole+ 
     '&userName='+userName+'&duration='+displayDuration+'&userId='+userId, 
    datatype: 'json', 
    colNames: ["CM","Display Location","Display Name","Item","Item Description", 
       "Store","DC","Date","Type","Promo Retail","Reg. Retail 50" "Units", 
       "Sales $", "Profit $"], 
//  $("#load_navGrid").html("Loading...").show(); 
    colModel: [ 
     {name:"cmName",index:"cmName",classes:"metric",width:130,resizable:true, 
     align:"left"}, 
     {name:"displayLocation",index:"displayLocation",width:80,align: "left"}, 
     {name:"displayName",index:"displayName",width:225,align:"left"}, 
     {name:"item",index:"item",sorttype:"int",width:60,align:"left"}, 
     {name:"itemDescription",index:"itemDescription",width:230,align:"left"}, 
     {name:"store",index:"store",sorttype:"int",width: 70,align: "right"//, 
     //unformat : spaceFormatter 
     }, 
     {name: "dc", index: "dc", sorttype: "int",width: 60,align: "right"//, 
     //unformat : spaceFormatter 
     }, 
     {name:"date",index:"date",sorttype:"date",datefmt:"mm-dd-yy",width:80, 
     align: "left"}, 
     {name: "type",index: "type",width: 45,align: "left"}, 
     {name: "price",index: "price",width: 70,align: "left"}, 
     {name: "regRetail",index: "regRetail",width: 70,align: "left"}, 
     {name:"units",index:"units",sorttype:"int",width:45,align:"right", 
     unformat : spaceFormatter}, 
     {name:"sales",index:"sales",sorttype:"int",width:45,align:"right", 
     unformat : spaceFormatter}, 
     {name:"profit1",index:"profit1",sorttype:"int",width:40,align:"right", 
     unformat : spaceFormatter} 
    ], 
    width: 982, 
    height: 137, 
    toolbar: [true, "top"], 
    viewrecords: true, 
    rowNum: 1500, 
//  gridview:true, 
    loadonce:true 
});

請提示我如何提高jqGrid的性能

來源

2010-12-07 DISMGMT

您是否也可以包含`spaceFormatter`和`metric` CSS的代碼。爲什麼你評論了'gridview：true`這一行？它應該提高性能。順便說一句，`align：「left」`設置是默認設置，可以從所有列定義中刪除。你能提供任何測試數據來填補網格嗎？如果將JSON數據保存在像test.json這樣的文本文件中，並將`url`值替換爲`test.json`，則可以在沒有服務器組件的情況下測試網格。 – Oleg 2010-12-07 12:04:26

使用虛擬滾動（查看demo，3.7版新增 - >虛擬滾動）。

來源

2010-12-07 07:15:55

你問題看起來像來自trirand論壇，我最近answered另一個問題。爲了確保我可以在這裏重複這些信息。

一般來說jqGrid不是顯示1000行的問題。其中有15列1000行的The demo example會很快顯示在我的電腦上。我沒有IE7，但在IE8，IE9測試版，Chrome瀏覽器，Firefox，Opera和Safari（全部在最新版本中）顯示錶格的時間非常快。在這個例子中，我使用了修改的jQuery UI，其中.ui-widget :active { outline: none; }被刪除。有關詳細信息，請參見here和here。

所以要能夠幫助你一個需要的可能你的jqGrid的全部定義包含HTML代碼並測試JSON數據。您可以捕獲關於Fiddler或Firebug的數據。可能您有一些數據類型，請不要使用gridview:true選項，並使用afterInsertRow方法，這會使jqGrid對滯後頁面的工作速度變慢。也可以在gridComplete或loadComplete事件處理程序中執行許多工作。所以沒有代碼我只能猜測。將數據排序以及如何將數據插入網格（使用data參數，loadonce:true或使用addRowData）可能也很重要。

另一種觀點是使用本地分頁。如果您希望一次從服務器返回所有1000行，它會干擾您不要使用本地分頁1000行數據。在the next example我證明了這一點。問題很簡單：所有1000行無法一次顯示給用戶。用戶必須在Web瀏覽器中滾動行，或者尊重jqGrid本地分頁。本地分頁的優點是：只有一個頁面的數據將被放置在表格中。所有其他數據將僅保存在內部的排序形式。它可以提高性能，並且不會從用戶的角度改變任何東西。

更那麼，有數據相對於的toolbar filtering或single field/advanced searching智能本地過濾可以幫助用戶非常多，從1000行將顯示他分析了大量的信息。本地過濾和本地分頁可以非常原生地一起使用。

來源

2010-12-07 11:02:11 Oleg

如何提高jqGrid的性能

回答

相關問題