如何在 ag-grid 中保存和恢复当前页面答案

【问题标题】：How to save and restore current page in ag-grid如何在 ag-grid 中保存和恢复当前页面
【发布时间】：2021-09-11 20:15:23
【问题描述】：

美好的一天！

我使用 ag-grid 在启用分页的“无限”行模型中显示长列表（包含多个页面）。用户可以一页一页地跳转。在某些时候，用户可以单击行查看详细信息。当他按下后，我想恢复 UI 状态。我已经为排序和过滤实现了恢复。但是找不到分页的方法。换句话说，我需要在创建 ag-grid 时指定当前页面。我在 'onGridReady' 事件的处理程序中调用 'mounted' 回调中的 'paginationGoToPage' 方法。没有运气。 ag-grid 总是从第一页开始。请指教

【问题讨论】：

标签： ag-grid

【解决方案1】：

您可以利用 api 方法paginationGetCurrentPage 来获取当前页面。通过利用 Grid Event paginationChanged，您可以监听用户何时导航到新页面并存储当前页面：

  onPaginationChanged: (params) => {
    if (params.newPage) {
      let currentPage = params.api.paginationGetCurrentPage();

      localStorage.setItem('currentPage', JSON.stringify(currentPage));
    }
  },

要恢复当前页面，只需通过api方法paginationGoToPage：

  onFirstDataRendered: (params) => {
    const pageToNavigate = JSON.parse(localStorage.getItem('currentPage'));
    params.api.paginationGoToPage(pageToNavigate);
  },

请参阅以下 plunkr 示例中的实现：https://plnkr.co/edit/RkOHpZ4bRhbWhY7D

【讨论】：

感谢您的回复。似乎 paginationGoToPage 在 onFirstDataRendered 中不起作用。它甚至在来自 ag-grid.com 的样本中也不起作用。我通过将 paginationGoToPage 的调用包装到 setTimeout 来修复它。
如果 paginationGoToPage 在文档示例中的 onFirstDataRendered 中不起作用，我建议在 ag-grid github 页面中将此作为可能的错误提出，以便团队进行调查。