0

我正在使用 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 发送第 1 页的 ajax 请求。2 3. 滚动超过接下来的 50 行后，jqgrid 再次发送第 2 页而不是第 3 页的 ajax 请求

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

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

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

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

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

4

1 回答 1

1

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

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

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

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

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

另一个说法。您应该更改name: 'Testors / Model Master'为没有特殊字符的名称。您应该将值理解为变量的名称或id属性的值。

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

于 2013-06-17T08:12:08.093 回答