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

Question

示例来自 http://www.trirand.net/demo/javascript/jqgrid/loading_data/scrollbar/index.htmlGuriddo 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 !?

我在带有 refreshstate: '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来自github。这是我的 jqGrid 分支，它基于 jqGrid 4.7，包含许多增强功能(参见 wiki 和 readme)。我刚刚发了the corresponding fix .