JQGrid渲染性能

Question

我們有JQgrid渲染的性能問題。請指教。 JQGrid v4.3.2，jquery-1.7.2.min.js，jquery-ui-1.8.1.sortable.min.js，jquery-ui-1.8.20.custom.min.js 瀏覽器：IE6瀏覽器：http：//www.jqgrid.org/ ，7

每個用戶都以2個網格顯示數據 - actions和fyi's。典型的數據範圍是每個網格約300行。列的列表可能因用戶組而異，因此colModel結構是動態的。獲取數據後，我們將條件樣式應用於每一行（如加粗或不加等）並更改數字格式。

網格代碼示例是如下：

jQuery('#ActionItems').jqGrid({ 
    url: 'http://actionsurl', 
    mtype: 'GET', 
    datatype: 'json', 
    page: 1, 
    colNames: actionsColNames, 
    colModel: actionsColModel, 
    viewrecords: true, 
    loadonce: true, 
    scrollrows: false, 
    prmNames: { id: "PrimaryID" }, 
    hoverrows: false, 
    jsonReader: { id: "PrimaryID" }, 
    sortname: 'CreateDt', 
    sortorder: 'desc', 
    gridComplete: function() { 
     fnActionsGridComplete(); 
    }, 
    recordtext: "Displaying {1} of {2} Records", 
    emptyrecords: "No data to view", 
    emptyDataText: "No data found.", 
    loadtext: "Loading...", 
    autoWidth: true, 
    rowNum: 1000, 
    grouping: true, 
    groupingView: groupingViewOp 
}); 

格式碼中fnActionsGridComplete（）：

1. 在％設定列寬度

2. 迭代通行應用條件CSS樣式

   $("#Actions").find("tbody tr").each(function() { 
       if ($(this)[0].id != '') { 
        var data = $(this).find('.IsItemNew').html(); 
         if(data == "Y") {    
         $(this).css("fontWeight", "bold"); 
         }     
       }      
   }); 
   

3. 格式化特定欄目。

目前，我們在任何網格中存在> 200行數據的性能問題。經過分析，我們發現格式化和渲染花費了大部分時間。

您可以在此建議任何優化方法來提高性能。 （分頁的禁忌）

問候， 拉賈尼

- 我們做測試的IE9和它的好多了。但用戶無法立即升級。

Answer 1

原因是代碼fnActionsGridComplete。我建議您閱讀the answer，這解釋了爲什麼使用gridview: true以及減少頁面DOM元素更改的次數非常重要。

您嘗試執行的操作似乎可以通過將cellattr添加到列"IsItemNew"來實現。該代碼可能是有關以下

cellattr: function (rowId, value) { 
    // additional parameter of cellattr: rawObject, cm, rdata are optional 
    if (value === "Y") { 
     return ' style="font-weight:bold;"'; 
    } 
} 

或者，你可以在類中添加class屬性，而不是style和定義font-weight: bold。

我建議你閱讀the answer，this one，this one等，如果你需要設置整行，而不是細胞上的一些屬性，你只能使用rowattr（見the answer）。

如果你將包括gridview: true和使用cellattr，rowattr或自定義格式，你會看到，格柵的性能將是絕對的另一個層面。