jqGrid 需要很长时间来处理大型记录 [英] jqGrid Taking Long Time For Large Records

问题描述

我正在使用 jgGrid.它工作得很好，但是当我通过大约 90,000 条记录并在谷歌浏览器中打开页面时，创建一个网格大约需要 8 秒，在我的情况下它应该接近 3-4 秒.而且，当我在 IE 上运行同一页面时，它变得无响应.

I am using jgGrid. Its working perfectly but when i pass about 90,000 records and open the page in google chrome it takes around 8 sec to create a grid which in my case it should be near 3-4 sec. and moreover when i run the same page on IE it became unresponsive.

有什么建议可以减少时间吗?

Any suggestion how can i reduce the time ?

我的脚本

function GetCommodityGrid(array) {
 array = array.rows; // assign rows array to array object
totalRows = array.length;
    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            datatype: 'local',
            data: array,
            colNames: ['COM_NAME', 'COM_CODE', 'DELV_UNITS', 'LOT_SIZE', 'TICK_SIZE', 'TICK_VALUE'],
            colModel: [
        { name: 'COM_NAME', index: 'COM_NAME', width: 90, editable: true },
        { name: 'COM_CODE', index: 'COM_CODE', width: 100, editable: true },
        { name: 'DELV_UNITS', index: 'DELV_UNITS', width: 80, align: "right", editable: true },
        { name: 'LOT_SIZE', index: 'LOT_SIZE', width: 80, align: "right", editable: true },
        { name: 'TICK_SIZE', index: 'TICK_SIZE', width: 80, align: "right", editable: true },
        { name: 'TICK_VALUE', index: 'TICK_VALUE', width: 150, sortable: false, editable: true }
    ],

            rowList: [50,100,200],
            rownumbers: true, // show the numbers on rows
            loadonce: true,
            pager: '#pager',
            sortname: 'COM_NAME',
            viewrecords: true, // show the total records on the end of the page
            editurl: "TestGrid/EditRecord",
            caption: "JSON Example",

            //new option

           gridview: true,
           autoencode: true,

        });


        $("#list").jqGrid("navGrid", "#pager", { add: false },
    { //the Edit options
        closeAfterEdit: true,
        afterSubmit: function (response) {
            // you should return from server OK in sucess, any other message on error
            alert("after Submit");
            if (response.responseText == "OKK") {
                alert("Update is succefully")
                return [true, "", ""]
            }
            else {
                alert("Update failed")
                $("#cData").click();
                return [false, "", ""]
            }
        }
    });



    });
}

推荐答案

我分析了加载包含 90,000 行未排序行的本地网格的过程，发现了非常有趣的瓶颈，可以轻松克服.首先这里是一个快速运行的演示here 几乎是相同的演示，但在 IE 中运行缓慢.

I analysed process of loading local grid with 90,000 unsorted rows and have found very funny bottleneck which one can easy overcome. First of all here is the demo which works quickly and here is almost the same demo which works much slowly especially in IE.

加载jqGrid的最多时间得到直接在开头的jqGrid代码行:

The most time of loading jqGrid get the line of jqGrid code directly at the beggining:

var p = $.extend(true,{
    // there are here different default values of jqGrid parameters
}, $.jgrid.defaults, pin || {});

因为使用 true 作为第一个参数，所以 jQuery 会完整复制数据并且它运​​行缓慢(为什么?这是另一个纯粹的 jQuery 问题).

Because one uses true as the first parameter then jQuery makes full copy of the data and it works slowly (why? It's another pure jQuery question).

作为一种解决方法，我建议在创建网格时不设置 data 参数.在这种情况下，将使用默认参数 data: [].取而代之的是，可以在 onInitGrid 回调中设置 data:

As a workaround I suggest to set no data parameter during creating the grid. In the case the default parameter data: [] will be used. Instead of that one can set data inside of onInitGrid callback:

$("#list").jqGrid({
    //data: gridData,
    datatype: "local",
    ....
    onInitGrid: function () {
        // get reference to parameters
        var p = $(this).jqGrid("getGridParam");

        // set data parameter
        p.data = gridData;
    }
});

因此网格的加载性能会变得更好.

As the result the performance of loading of the grid will become much better.

稍后我将向 trirand 发布我的建议，如何在案例中对 jqGrid 的代码进行小的更改以提高 jqGrid 的性能.我的建议很简单.可以将 data 参数保存在变量中，然后调用 var p = $.extend(true,{...}); 然后设置 data 参数直接在 p 变量中

I will post later my suggestions to trirand how to make small change of the code of jqGrid to improve the performance of jqGrid in the case. What I suggest is very simple. One can save data parameter in a variable, then call var p = $.extend(true,{...}); and then set data parameter directly in p variable

    // save local data array in temporary variable and remove from input parameters
    // to improve performance
    var localData;
    if (pin != null && pin.data !== undefined) {
        localData = pin.data;
        pin.data = [];
    }
    var p = $.extend(true,{
        // there are here different default values of jqGrid parameters
    }, $.jgrid.defaults, pin || {});
    if (localData !== undefined) {
        p.data = localData;
    }

演示使用jqGrid的固定代码和它工作得很快.

更新:我发布到的 拉取请求trirand 已经 合并 到 github 上 jqGrid 的主要代码中(更多内容见 错误报告).所以 jqGrid 的下一个版本(4.6.0 以上的版本)不会出现上述问题.

UPDATED: The pull request which I posted to trirand is already merged to the main code of jqGrid on github (see more in the bug report). So the next version of jqGrid (version higher as 4.6.0) won't have the described problem.

这篇关于jqGrid 需要很长时间来处理大型记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！