jqGrid 排序 - 浏览器挂起更大的数据答案

【问题标题】：jqGrid Sort - Browser hangs for bigger datajqGrid 排序 - 浏览器挂起更大的数据
【发布时间】：2016-03-05 16:24:35
【问题描述】：

我有一个要求，我必须在 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.");
                    },

                });

【问题讨论】：

要在排序时显示信息，您可以使用events onSortCol（在单击可排序列后立即触发）和gridComplete（ 在所有数据加载到网格中并且所有其他过程都完成后触发。此外，事件触发独立于数据类型参数和排序分页等之后。)
显示器上可以显示多少行？将rowNum 的值降低到20-30 不是更好吗？不仅要知道行数，还要知道您拥有的列数，这一点非常重要。指定使用哪个版本的 jqGrid 和 jqGrid 的哪个分支很重要（free jqGrid、Guriddo jqGrid JS 或版本

标签： javascript jquery sorting jqgrid

【解决方案1】：

我发现减少页面中的行数最重要。 rowNum : 500 的选择很糟糕。没有监视器可以显示这么多行。性能的另一个重要方面是列数。作为行数，这是更重要的方面。此外，提及您在测试中使用的 Web 浏览器非常重要。谷歌浏览器的性能不能比IE8的性能好很多。所有问题都应该写出你在测试中使用了哪个版本的 jqGrid 和哪个 fork。

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

rowNum: 20

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

【讨论】：