JQGrid 渲染性能答案

【问题标题】：JQGrid rendering performanceJQGrid 渲染性能
【发布时间】：2012-12-05 15:51:38
【问题描述】：

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,7

每个用户都会在 2 个网格中显示数据 - 操作和仅供参考。每个网格中的典型数据范围约为 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() 中的格式化代码：

以 % 为单位设置列宽

遍历行以应用条件 CSS 样式

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

特定列的格式。

目前，我们在任何网格中都存在超过 200 行数据的性能问题。经过分析，我们发现格式化和渲染花费的时间最多。

您能否在这里提出任何提高性能的最佳方法。（分页是不行的）

问候，拉贾尼

- 我们在 IE9 上进行了测试，它的性能要好得多。但用户无法立即升级。

【问题讨论】：

标签： jqgrid html-rendering

【解决方案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 或自定义格式化程序，您会发现网格的性能绝对会达到另一个水平。

【讨论】：