1

We have performance issues with JQgrid rendering. Please advise.

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 Browser: IE6,7

Every user is shown data in 2 grids - actions and fyi's. Typical data range is ~300 rows in each grid. The list of columns could vary for user groups and hence the colModel structure is dynamic. After getting data we apply conditional styles to each row (to be bold or not etc) and change the number formatting.

Code sample for grid is as below:

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

Formatting code in fnActionsGridComplete():

  1. Set column widths in %

  2. Iterate thru rows to apply conditional css styles

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

Currently we have performance issues for >200 rows of data in any grid. After analysis we found that formatting and rendering is taking most time.

Can you suggest any optimal way to improve performance here. (paging is no-no)

Regards, Rajani

- We did testing on IE9 and its lot better. But users cant immediately upgrade.

4

1 回答 1

3

原因是代码fnActionsGridComplete。我建议您阅读答案，该答案解释了为什么使用gridview: true和减少页面 DOM 元素的更改次数非常重要。

您尝试做的似乎可以通过添加cellattr到 column来实现"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。

我建议你阅读答案，这个，这个等等。如果你需要在整行而不是你可以使用的单元格上设置一些属性rowattr（见答案）。

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

于 2012-12-18T12:54:11.983 回答