JQGrid渲染性能

问题描述

我们在JQgrid渲染方面存在性能问题.请告知.

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浏览器:IE6,7

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.jsBrowser: IE6,7

每个用户在2个网格中看到的数据-动作和fyi.典型的数据范围是每个网格中约300行.列的列表可能因用户组而异，因此colModel结构是动态的.获取数据后，我们将条件样式应用于每一行(以粗体显示或不以粗体显示)，并更改数字格式.

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.

网格的代码示例如下:

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()中设置代码格式:

Formatting code in fnActionsGridComplete():

1. 以％设置列宽

2. 遍历行以应用条件css样式

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

格式化特定列.

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

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)

关于，拉贾尼

-我们在IE9及其更高版本上进行了测试.但是用户无法立即升级.

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

推荐答案

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

The reason is the code fnActionsGridComplete. I recommend you to read the answer which explains why it's very important to use gridview: true and reduce the number of changes of DOM elements of the page.

您尝试执行的操作似乎可以通过在列"IsItemNew"中添加cellattr来实现.该代码可能与以下内容有关

What you try to do seems could be implemented by adding cellattr to the column "IsItemNew". The code could be about the following

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.

Alternatively you can add class attribute instead of style and define font-weight: bold in the class.

我建议您阅读答案，，这一个等.如果您需要在整个行而不是单元格，您只能使用rowattr(请参见答案).

I recommend you to read the answer, this one, this one etc. If you would need to set some properties on the whole row instead of the cell only you can use rowattr (see the answer).

如果包含gridview: true并使用cellattr，rowattr或自定义格式化程序，您将看到网格的性能将绝对处于另一个水平.

If you would include gridview: true and use cellattr, rowattr or custom formatters you would see that the performance of the grid will be on absolutely another level.

这篇关于JQGrid渲染性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！