ReactJS AG-Grid：如何设置表头复选框默认选中所有行？

AG-Grid 没有直接的配置项可以让表头复选框默认选中，不过可以通过 Grid API 在表格初始化完成后手动触发全选操作来实现需求。

实现步骤 #

• 监听 gridReady 事件，在表格初始化完成后调用全选 API
• 根据表格类型选择对应 API：
  • 普通非分组表格：调用 api.selectAll()
  • 分组表格（如你的列配置中 type: "group"）：若需选中所有分组下的子节点，调用 api.selectAllGroupChildren(true)；若仅需选中分组父节点，可结合 api.forEachNode() 手动遍历选中

代码示例 #

1. 绑定 gridReady 事件

<ag-grid-angular
  (gridReady)="onGridReady($event)"
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  <!-- 其他配置项 -->
></ag-grid-angular>

2. 实现全选逻辑

onGridReady(params: GridReadyEvent) {
  const api = params.api;
  // 分组表格：选中所有分组子节点，表头复选框会同步为选中状态
  api.selectAllGroupChildren(true);

  // 非分组表格用以下代码：
  // api.selectAll();
}

3. 保留原有列定义

{
    colId: "groupSelection",
    headerName: "Name",
    minWidth: 40,
    maxWidth: 40,
    resizable: false,
    type: "group",
    checkboxSelection: true,
    headerCheckboxSelection: true,
},

注意事项 #

• 如果是异步加载 rowData，需要在数据加载完成后再执行全选操作，可在 rowDataChanged 事件中处理
• 分组表格的选中逻辑需根据业务需求调整，selectAllGroupChildren(true) 会选中所有分组子节点，表头复选框状态会自动同步

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