AG-Grid免费版切换页大小时getRows重复调用问题求助

问题原因 #

当你同时更新AG-Grid的paginationPageSize（页大小）和cacheBlockSize（缓存块大小）时，AG-Grid会触发两次getRows调用：

• 第一次是paginationPageSize变更导致分页系统重置，触发数据加载
• 第二次是cacheBlockSize变更导致无限行模型的缓存机制重新初始化，再次触发数据加载

切换上下页时无此问题，是因为此时仅触发分页位置变更，不会修改缓存块大小，因此只会触发一次getRows。

修复方案 #

1. 批量更新配置并手动控制缓存刷新 #

避免分开调用setPaginationPageSize和setCacheBlockSize，改用setGridOption批量更新参数，之后手动触发一次缓存刷新，确保只发起一次请求：

onPageSizeChange(newSize: number) {
  // 批量更新分页和缓存配置
  this.gridApi.setGridOption({
    paginationPageSize: newSize,
    cacheBlockSize: newSize
  });
  // 清除现有缓存并刷新，仅触发一次getRows
  this.gridApi.refreshInfiniteCache({ purge: true });
  // 回到第一页（可选，根据业务需求调整）
  this.gridApi.paginationGoToPage(0);
}

2. 优化getRows函数，避免重复请求（兜底方案） #

如果上述方法仍有问题，可以在getRows中添加重复请求判断，通过请求参数做去重：

private lastRequest: { offset: number; limit: number } | null = null;

getRows(params: IGetRowsParams) {
  const offset = params.startRow;
  const limit = params.endRow - params.startRow;

  // 判断是否为重复请求，直接返回缓存结果
  if (this.lastRequest?.offset === offset && this.lastRequest?.limit === limit) {
    params.successCallback(this.cachedData, this.totalRowCount);
    return;
  }

  this.lastRequest = { offset, limit };
  this.mockService.getData(offset, limit).subscribe(data => {
    this.cachedData = data.rows;
    this.totalRowCount = data.total;
    params.successCallback(data.rows, data.total);
    this.lastRequest = null;
  });
}

机制澄清 #

使用无限行模型结合分页时，cacheBlockSize应该始终等于paginationPageSize，这样每个缓存块刚好对应一页数据，AG-Grid的分页和缓存机制可以更好地协同工作。如果两者不一致，会导致缓存碎片和不必要的请求触发。

内容的提问来源于stack exchange，提问作者Khaled Saleh