AG Grid SSRM模式下如何预加载所有行实现全选？

针对你用Server-Side Row Model（SSRM）实现动态表格时，全选按钮无法选中未加载行的问题，核心原因是SSRM按需加载行节点，forEachNode只能遍历已加载到客户端的节点。以下是几种无需复杂状态管理的解决方案：

方案1：预加载所有行（适合小数据量场景） #

如果表格数据总量不大，可以在点击全选按钮时强制加载所有行，再执行选中操作：

toggleSelect(): void {
  this.isChecked = !this.isChecked;
  if (this.isChecked) {
    const totalRows = this.params.api.getVirtualRowCount();
    // 循环触发每一行的加载与选中
    for (let i = 0; i < totalRows; i++) {
      this.params.api.ensureIndexVisible(i);
      const node = this.params.api.getRowNode(i);
      node?.selectThisNode(true);
    }
    // 触发选择变更事件
    this.params.api.eventService?.dispatchEvent({
      type: 'selectionChanged',
      api: this.params.api,
      columnApi: this.params.columnApi
    });
  } else {
    this.deselectAll();
  }
}

注意：数据量过大（如上万行）时，此方法会导致客户端性能问题，不推荐使用。

方案2：启用服务器端选择模式（推荐大数据量场景） #

通过AG Grid内置的服务器端选择配置，仅维护一个全局全选状态，无需手动管理所有行的选中状态：

1. 表格配置新增参数：

gridOptions = {
  rowSelection: 'multiple',
  serverSideSelection: true,
  // 自定义行选中判断逻辑
  isRowSelected: (node: RowNode) => {
    return this.isAllSelected || node.isSelected();
  },
  // 其他SSRM相关配置...
};

2. 按钮组件简化全选逻辑：

toggleSelect(): void {
  this.isChecked = !this.isChecked;
  // 通知表格刷新选中状态，新加载的行会自动应用全选规则
  this.params.api.refreshClientSideRowModel('selection');
  
  if (!this.isChecked) {
    this.deselectAll();
  }
}

此方法无需加载所有行，仅通过一个布尔值控制全选状态，性能开销极低，新滚动加载的行渲染时会自动被选中。

方案3：使用AG Grid内置selectAll()方法 #

配合serverSideSelection: true配置，直接调用内置方法实现全选：

toggleSelect(): void {
  this.isChecked = !this.isChecked;
  if (this.isChecked) {
    this.params.api.selectAll();
  } else {
    this.params.api.deselectAll();
  }
}

开启serverSideSelection: true后，selectAll()会标记全局全选状态，而非仅选中已加载行，后续滚动加载的行自动进入选中状态。

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