Question

我正在使用jqGrid版本4.5.2和jquery 1.9.1以及MVC 4.

我使用的网格总共有大约2000行，我一次显示100个。我正在使用虚拟网格滚动，而不是分页，具有以下网格定义：

$("#colorsGrid").jqGrid({
            url: '@Url.Action("Colors")',
            //datatype: 'xml',
            datatype: 'json',
            colNames: ['id', 'RGB', 'FS', 'RAL', 'Humbrol', 'Revell', 'Tamiya', 'RLM', 'Vallejo', 'Testors / Model Master','ANA','Games Workshop / Citadel'],
            colModel: [
                { name: 'id', index: 'id', hidden: true },
                { name: 'RGB', sorttype: rgbColorSorter, formatter: rgbColumnFormatter, width: 70 },
                { name: 'FS', sorttype: colorSorter, formatter: colorFormatter, width: 200 },
                { name: 'RAL', sorttype: colorSorter, formatter: colorFormatter, width: 200 },
                { name: 'Humbrol', sorttype: colorSorter, formatter: colorFormatter, width: 200 },
                { name: 'Revell', sorttype: colorSorter, formatter: colorFormatter, width: 200 },
                { name: 'Tamiya', sorttype: tamiyaColorSorter, formatter: colorFormatter, width: 200 },
                { name: 'RLM', sorttype: colorSorter, formatter: colorFormatter, width: 200 },
                { name: 'Vallejo', sorttype: colorSorter, formatter: colorFormatter, width: 200 },
                { name: 'Testors / Model Master', sorttype: colorSorter, formatter: colorFormatter, width: 200 },
                { name: 'ANA', sorttype: colorSorter, formatter: colorFormatter, width: 200 },
                { name: 'GamesWorkshop', sorttype: colorSorter, formatter: colorFormatter, width: 200 }
            ],
            rowNum: 50,
            scroll: 1,
            emptyrecords: "No colors found",
            loadonce: false,
            autowidth: false,
            sortable: true,
            afterInsertRow: afterInsertRowFunction,
            multipleSearch: true,
            ignoreCase: true,
            postData: { filterText: function () { return $('#colorFilter').val(); }},
            loadComplete: function () {
                if (!resizeGridOnLoadComplete) {
                    resizeGridOnLoadComplete = true;
                    resizeGrid();
                }
            }

函数afterInsertRowFunction只为行设置一些css样式。 resizeGrid函数仅调用网格上的setGridHeight以动态修复高度。

在控制器端，我只返回Request.QueryString参数中请求的行数而不是整个数据集，以及记录和页面的总数。缩写示例：

{"page":1,"total":38,"records":1918,"rows":[{"id":1,"cell":["1","654037","^10075^10075^^~","","","","","","","","4F2E26^510^510 - Maroon^gloss^Pre/Early WWII~",""]},{"id":2,"cell":["2","7c3925","^10076^10076 - Coast Guard Deck Red, Metallic Red-Brown^^~","","","","","","","","",""]},

我的问题是发生以下情况： 1.在加载页面时，jqGrid发送第1页的ajax请求 2.滚动过去的最初50行后，jqgrid发送一个页面号为ajax的请求。 2 3.滚动过去的50行后，jqgrid再次发送第2页的ajax请求而不是第3页

如果我继续滚动，那么jqGrid将发送第3页的请求（现在应该是第4页）。

由于重复的请求并发回相同的数据，它会弄乱网格。

我尝试过的事情： xml或json格式。保留jqGrid元素的最小设置。 rowNum中的行数不同。滚动参数为“true”。

我见过人们提到一些非常相似的东西，但它是两年前和两个版本的jqGrid，并且已修复。

为什么jqGrid会为同一页面发送重复请求？

Answer 1

首先，在使用虚拟滚动（scroll: 1选项）的情况下，向服务器发送两个请求。

我个人不喜欢在jqGrid中实现虚拟滚动。我发现它有一些错误（包括虚拟滚动实现设计中的一些错误）。所以我自己不使用该功能，也不建议将该功能用于其他功能。对于某些用户来说，标准滚动可能有点奇怪，但是用户需要花费几分钟时间来研究导航栏中按钮的滚动。您可以考虑使用toppager: true选项在网格顶部创建寻呼机。可以使用额外的pager选项来拥有两个寻呼机。您可以使用navGrid和cloneToTop: true选项在两个寻呼机中添加导航按钮。

通常，使用2000行显示未过滤的数据没有多大意义。一个人通常另外使用filterToolbar。因此，用户可以过滤数据以查看他真正寻找的数据子集。如果考虑一下这个功能，那么这种分页方式就不那么重要了。需要用户的数据通常会显示在一个页面上。

我对您的代码有更重要的评论，这些评论与您的问题没有直接关系，但我发现这些评论非常重要。首先，您不应该使用afterInsertRow。它使网格填充缓慢。我建议你阅读the answer我在哪里详细描述问题。您应该使用rowattr，cellattr或custom formatters并使用gridview: true选项。如果我在afterInsertRowFunction内正确理解您的操作，您可以按照the answer中描述的方式使用rowattr。您应该考虑到您的案例中rowattr的第一个参数是数组而不是具有命名属性的对象。因此，您应该使用整数索引来访问该行的属性。

完成上述更改后，您可以考虑使用loadonce: true选项。在服务器应该返回所有 2000行数据的情况下。数据应该仍然对应于您使用的sortname选项（如果您使用它）。我认为您可以在本地分页和排序中获得非常好的性能。您的服务器代码可以简化。顺便说一下，您不需要在服务器响应中返回"page":1,"total":38,"records":1918部分。返回的数据可以只是表示行的项目数组。该行可以是表示命名属性的列或对象的项目数组（与name中的colModel属性值相同）。

另一个评论。您应该将name: 'Testors / Model Master'更改为某个名称而不需要特殊字符。您应该将值理解为变量名称或类似id属性的值。

最后一句话：您可以删除id列。每行（id id）的<tr>属性的值将根据来自serevr的JSON响应的"id"属性进行分配。

jqGrid在滚动时发送重复的页面编号ajax请求

1 个答案: