刷新 jqGrid 不会保存启用无限滚动的当前页面位置

Question

示例来自 http://www.trirand.net/demo/javascript/jqgrid/loading_data/scrollbar/index.html Guriddo jqGrid JS 版本：4.7.0 和 4.7.1

(function ($) {
  'use strict';
  $(function () {
    $('#jqGrid').jqGrid({
      url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
      mtype: 'GET',
      datatype: 'json',
      page: 1,
      colNames: ['Order ID', 'Customer ID', 'Order Date', 'Freight', 'Ship Name'],
      colModel: [{
        name: 'OrderID',
        key: true,
        width: 75
      }, {
        name: 'CustomerID',
        width: 150
      }, {
        name: 'OrderDate',
        width: 150
      }, {
        name: 'Freight',
        width: 150
      }, {
        name: 'ShipName',
        width: 150
      }],
      width: 750,
      height: 250,
      rowNum: 20,
      scroll: 1, // 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
      pager: '#jqGridPager'
    });
  });
})(jQuery);

当我调用2次时：

$('#jqGrid').trigger('reloadGrid', {
    page: 3
});

first time request: 页面参数如预期的那样为 3。

second time request: 页面参数是 1 !?

我在刷新状态的刷新按钮上看到同样的问题：'current'，它根本不起作用。

Answer 1

首先我可以确认错误。它也存在于更多旧版本的 jqGrid 中（例如在 jqGrid 4.6 中）。原因在下面几行（见the lines of the source code）

if (ts.grid.prevRowHeight && ts.p.scroll) {
    delete ts.p.lastpage;
    ts.grid.populateVisible();
} else {
    ts.grid.populate();
}

jqGrid 在第一次重新加载网格时具有 undefined 值 ts.grid.prevRowHeight 并将 ts.grid.prevRowHeight 设置为 22 （22px 是行的高度）。因此下一次（第二次）重新加载网格将使用 populateVisible 而不是 populate。函数 populateVisible 仅使用当前滚动位置（bDiv 的 scrollTop）并且它忽略 page 网格参数。

因此，我可以建议您解决问题的多种方法：如果您必须使用特定的旧版本 jqGrid（例如，如果您必须使用 jqGrid 4.7），那么您可以使用以下代码作为解决方法：

$('#jqGrid')[0].grid.prevRowHeight = undefined; // workaround!!
$('#jqGrid').trigger('reloadGrid', {
    page: 3
});

或者您可以将 jquery.jqgrid.src.js 的代码修改为以下

if (ts.grid.prevRowHeight && ts.p.scroll && opts.page === undefined) {
    delete ts.p.lastpage;
    ts.grid.populateVisible();
} else {
    ts.grid.populate();
}

我可以建议您的另一个选项：您可以加载 free jqGrid from github. It's my fork of jqGrid which is based on jqGrid 4.7 and which contains many enhancements (see wiki and the readme). I posted just now the corresponding fix 的当前版本。

刷新 jqGrid 不会保存启用无限滚动的当前页面位置

Refreshing jqGrid doesn't save current page position with infinite scroll enabled

javascript

jquery

pagination

jqgrid

jqgrid-asp.net