Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
295 views
in Technique[技术] by (71.8m points)

javascript - jqGrid Taking Long Time For Large Records

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 ?

my script

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



    });
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.

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

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).

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.

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

The demo uses the fixed code of jqGrid and it works quickly.

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...