jqGrid在滚动时发送重复的页码ajax请求

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 页而不是第 3 页的 ajax 请求

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

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

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

我看到人们提到了一些非常相似的东西，但它是两年零两个以前的 jqGrid 版本，并且已经修复。

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

Answer 1

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

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

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

我对您的代码有更重要的评论，这些评论与您的​​问题没有直接关系，但我认为这非常重要。首先你不应该使用afterInsertRow。它使网格的填充缓慢。我建议您阅读the answer，我在其中详细描述了问题。取而代之的是，您应该使用 rowattr、cellattr 或 custom formatters 并使用 gridview: true 选项。如果我正确理解你在afterInsertRowFunction 中所做的事情，你可以使用rowattr 以接近the answer 中描述的方式。您应该考虑到rowattr 在您的情况下的第一个参数将是数组而不是具有命名属性的对象。所以你应该使用整数索引来访问行的属性。

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

另外一句话。您应该将 name: 'Testors / Model Master' 更改为不带特殊字符的名称。您应该将值理解为变量的名称或id 属性的值。

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