jqGrid排序 - 浏览器挂起以获取更大的数据

时间:2015-12-01 16:49:50

标签: javascript jquery sorting jqgrid

我有一个要求,我必须在jqgrid中加载完整的数据(30,000行),数据能够成功加载。但是,如果我点击排序完成数据加载后,浏览器会挂起几秒钟,然后正确加载网格和排序数据。他们是否可以在排序时停止浏览器挂起或显示加载图标。

有关处理jqGrid中大量数据的任何建议

我正在使用静态数据加载网格,并且一次提取和加载500条记录。

我的网格代码为 -

$('#demo').jqGrid({                     
                    datastr : 'json',
                    datatype : "local",
                    sortable: true,
                    sortname : sortcol,
                    sortorder : asc, //sort order
                    colModel : colModelGrid, //Creating the grid model before jqgrid
                    page : 1,
                    height : '100%',
                    width : gridTotalWidth,
                    rowNum : 500,
                    rowTotal : bugCountTotal,
                    loadOnce : true,
                    loadui : "disable",
                    loadtext : "Loading...",
                    rownumbers : true,
                    //define column models
                    pager : '#' + pagerInfo, //set your pager div id
                    viewrecords : false, 
                    search : true,
                    rowList : rowInfo,
                    caption : 'Complete Report',
                    scroll : true, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
                    emptyrecords : 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom

                    data : bugDetails, //variable that stores complete data - Static data
                    beforeRequest : function () {
                        //Show Spinner
                    },
                    loadComplete : function (data) {
                        //Hide Spinner
                        return;
                    },
                    loadError : function (r, st, error) {
                        console.log("Error Loading Grid.");
                    },

                });

1 个答案:

答案 0 :(得分:0)

我发现减少页面中行数最重要。 rowNum : 500的选择非常糟糕。没有监视器可以显示这么多行。性能的其他重要方面是列数。作为行数,它是更重要的方面。此外,提及您在测试中使用的Web浏览器非常重要。例如,IE浏览器的性能不如IE8的性能好得多。所有问题都应该写出你在测试中使用的jqGrid版本和哪个分支。

我为你做了the demo,它展示了网格的加载,排序和过滤时间,每页有20行显示13列和30000行。我使用了free jqGrid fork,我开发了它。您可以在浏览器中对其进行测试,这对您来说是最重要的,并且可以看到预期的性能。代码很简单。您可以使用http://jsfiddle.net/OlegKi/1rmmyeLh/9/在效果方面发挥更多作用。代码使用

rowNum: 20

我建议您尝试减少应用程序中的rowNum值,并修改(至少是临时测试)jqGrid文件的URL以释放the wiki中描述的jqGrid URL。你应该看到性能优势。