javascript - jqGrid 需要很长时间处理大记录

Question

我正在使用 jgGrid。它工作完美，但是当我传递大约 90,000 条记录并在谷歌浏览器中打开页面时，创建一个网格需要大约 8 秒，在我的情况下它应该接近 3-4 秒。此外，当我在 IE 上运行相同的页面时，它变得没有响应。

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

我的脚本

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



    });
}

Answer 1

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

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

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

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

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

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

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

作为结果，网格的加载性能将变得更好。

我稍后会向 trirand 提出如何对 jqGrid 的代码进行小改动以提高 jqGrid 在这种情况下的性能的建议。我的建议很简单。可以将 data 参数保存在一个变量中，然后调用 var p = $.extend(true,{...}); 然后设置 data参数直接在p变量

中

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

The demo使用 the fixed code of jqGrid而且效果很快。

更新:The pull request我发布到 trirand 的已经是 merged到 github 上 jqGrid 的主要代码(参见 the bug report 中的更多信息)。所以下一个版本的 jqGrid(4.6.0 以上的版本)将不会出现上述问题。