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

每个用户都显示2个网格中的数据 - 动作和fyi。典型的数据范围是每个网格约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进行了测试，并且更好。但用户无法立即升级。

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等。如果您需要在整行而不是单元格中设置一些属性，则可以使用{{1 （见the answer）。

如果您要包含rowattr并使用gridview: true，cellattr或自定义格式化程序，您会发现网格的性能绝对是另一个级别。

JQGrid渲染性能

1 个答案: