无限滚动分页 ag-Grid 初始页面大小问题答案

【问题标题】：Infinite scroll pagination ag-Grid initial page size issue无限滚动分页 ag-Grid 初始页面大小问题
【发布时间】：2018-11-17 13:00:54
【问题描述】：

我正在尝试编写一些代码，让我可以将ag-Grid 库与无限滚动 方法一起使用。

但我坚持使用正确配置此行为的参数。

例如，假设我想一次从服务器检索包含 20 个项目的页面。如果我理解正确the API 允许我设置页面大小的参数是cacheBlockSize。

实际上，使用getRows 参数对datasource 中定义的方法的每次调用都需要20 行。

但是，在初始阶段，不像我预期的那样只发出一个调用，而是不止一个调用。除非您设置一个非常大的cacheBlockSize（例如，在下面的示例中为 100 或更多）。而且我不明白这种行为是否可配置（可能是paginationPageSize ??）。

例如。

使用此参数：

var gridOptions = {
  enableServerSideSorting: true,
  enableServerSideFilter: false,
  rowModelType: 'infinite',
  columnDefs: columnDefs,
  //paginationPageSize: 20,
  cacheBlockSize: 20,
  maxConcurrentDatasourceRequests: 1,
  infiniteInitialRowCount: 1
};

如您所见here，在开始时，加载 20 行的单个调用改为加载总共 20*3=60 行的 3。

【问题讨论】：

标签： javascript datatable ag-grid

【解决方案1】：

您看到多个请求的原因是网格中一次显示的记录数大于页面大小。

假设您的页面大小为 20（即一次从服务器获取 20 条记录），并且由于网格的高度，如果网格能够显示超过 20 条记录，比如说 30，然后它将从服务器获取下一个块。

查看实时示例：ag-grid: infinite-scroll-pagination-ag-grid-initial-page-size-issue

<div id="myGrid" style="height: 300px;" class="ag-theme-balham"></div>

在这里，我设置了高度，网格将只显示 9 条记录，因此它没有从服务器获取下一个块。

如果你逐渐增加高度，你会注意到更多的请求。

这是有道理的。我说的对吗？

【讨论】：

是的，这是有道理的！似乎它要求的数量几乎是页面上的两倍。坦克！
嘿@Paritosh 我试过了，但即使高度为 100 px，我的 react 应用程序仍然会进行两次调用。你能帮忙吗？
@Paritosh 没关系。我观察到，只要 cacheBlockSize 为 20 或更高，并且如果我们相应地调整高度，它就不会对下一个块发出不需要的间接请求。因此，即使使用您共享的 plunker，我也将 cacheBlockSize 从 20 更改为 19 并保持高度相同，即 300px，它发出了另一个请求。