ag-grid Infinite Row model下删除指定行且避免网格刷新的实现

刚好我之前也遇到过这个场景，给你分享个靠谱的解决方案——不用触发AJAX请求，直接操作ag-grid的内部缓存来更新数据，同时保留分页状态：

核心思路 #

Infinite Row Model的本质是按需加载并缓存分页数据，所以我们可以直接修改已加载的缓存块数据，再通知网格更新视图，全程不触发getRows请求。

具体步骤&代码示例 #

假设你已经在服务器端完成了行删除操作，接下来前端可以这么做：

// 1. 获取你的grid API实例（根据你的项目实际方式获取）
const gridApi = gridOptions.api;
// 要删除的行的唯一标识（比如id）
const rowIdToDelete = "target-row-id";

// 2. 获取当前所有已加载的缓存块
const cacheBlocks = Object.values(gridApi.getCacheBlockState());

// 3. 遍历缓存块，找到并移除目标行
cacheBlocks.forEach(block => {
  const targetRowIndex = block.rowData.findIndex(row => row.id === rowIdToDelete);
  if (targetRowIndex !== -1) {
    // 从缓存块的行数据中移除目标行
    block.rowData.splice(targetRowIndex, 1);
    // 更新该缓存块的行计数
    block.rowCount -= 1;
  }
});

// 4. 更新全局总行数，第二个参数设为false，避免触发分页重置和getRows请求
const currentTotalRows = gridApi.getDisplayedRowCount();
const newTotalRows = currentTotalRows - 1;
gridApi.setRowCount(newTotalRows, false);

// 5. 处理分页边界情况（比如删除后当前页为空，自动跳转到上一页）
const paginationProxy = gridApi.paginationProxy;
const currentPage = paginationProxy.getCurrentPage();
const totalPages = Math.ceil(newTotalRows / paginationProxy.getPageSize());

if (currentPage > totalPages && totalPages > 0) {
  paginationProxy.goToPage(totalPages - 1);
}

// 6. 刷新视图，重绘受影响的行
gridApi.redrawRows();

关键注意事项 #

• 一定要确保服务器端已经完成行删除，否则用户切换到未加载的分页块时，新拉取的数据会和缓存不一致。
• 这个方法只修改已加载的缓存块，未加载的块在用户切换时还是会触发getRows，但因为服务器已经删了数据，新拉取的结果是正确的。
• 如果你的行有排序/过滤状态，可能需要额外处理缓存块的排序过滤逻辑，但一般场景下上面的代码足够覆盖需求。

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