如何在AG Grid中实现带复选框的范围/列选择且不选中整行？

类似使用场景 #

当然有，这类需求常见于：

• 需对特定列的单元格进行独立批量操作（比如某列的审批状态批量勾选、特定数据列的批量标记）
• 多列并行的独立选择控制（比如同一行不同列分别对应不同的操作维度，各自的复选框互不干扰）

现成方案说明 #

AG Grid 没有内置的「整列选择」功能，但可以通过独立存储每列选择状态的方式实现，核心是避免将列复选框的状态与行选择绑定——默认的行选择逻辑会导致同行复选框联动，只要把每个列的勾选数据单独存在组件的变量里，就能彻底避免这个问题。

无需自定义渲染器的极简实现示例（Angular） #

以下是基于AG Grid内置能力的实现，不用写自定义渲染器：

1. 组件内定义状态存储 #

// 存储每列的勾选状态，key为列字段名，value为选中的行ID集合
columnSelection: Record<string, Set<string>> = {
  'column1': new Set(),
  'column2': new Set()
};
// 存储列头复选框的全选状态
headerChecked: Record<string, boolean> = {
  'column1': false,
  'column2': false
};
// 用于保存Grid实例API
gridApi: any;

2. 列配置（关键：用内置复选框渲染器绑定独立状态） #

columnDefs = [
  {
    headerName: '列1',
    field: 'column1',
    // 开启列头复选框
    headerCheckboxSelection: true,
    headerCheckboxSelectionFilteredOnly: true,
    // 控制列头复选框的显示状态
    headerCheckboxSelectionCallback: (params) => {
      return this.headerChecked['column1'];
    },
    // 使用内置复选框渲染器
    cellRenderer: 'agCheckboxCellRenderer',
    cellRendererParams: {
      onChange: (e, params) => {
        const rowId = params.node.id;
        if (e.target.checked) {
          this.columnSelection['column1'].add(rowId);
        } else {
          this.columnSelection['column1'].delete(rowId);
        }
        // 更新列头全选状态
        this.updateHeaderCheck('column1');
      },
      checked: (params) => {
        return this.columnSelection['column1'].has(params.node.id);
      }
    }
  },
  {
    headerName: '列2',
    field: 'column2',
    // 复用类似逻辑，绑定column2的独立状态
    headerCheckboxSelection: true,
    headerCheckboxSelectionFilteredOnly: true,
    headerCheckboxSelectionCallback: (params) => {
      return this.headerChecked['column2'];
    },
    cellRenderer: 'agCheckboxCellRenderer',
    cellRendererParams: {
      onChange: (e, params) => {
        const rowId = params.node.id;
        if (e.target.checked) {
          this.columnSelection['column2'].add(rowId);
        } else {
          this.columnSelection['column2'].delete(rowId);
        }
        this.updateHeaderCheck('column2');
      },
      checked: (params) => {
        return this.columnSelection['column2'].has(params.node.id);
      }
    }
  },
  // 其他业务列配置...
];

3. 实现列头全选/状态同步逻辑 #

// Grid初始化完成后保存API实例
onGridReady(params: any) {
  this.gridApi = params.api;
}

// 列头复选框点击事件
onHeaderCheckboxClicked(params: any) {
  const field = params.column.getColDef().field;
  this.headerChecked[field] = !this.headerChecked[field];
  const allRowIds = this.gridApi.getRenderedNodes().map(node => node.id);
  
  if (this.headerChecked[field]) {
    allRowIds.forEach(id => this.columnSelection[field].add(id));
  } else {
    this.columnSelection[field].clear();
  }
  // 刷新对应列的单元格状态
  this.gridApi.refreshCells({ columns: [field] });
}

// 单个单元格勾选后，更新列头全选状态
updateHeaderCheck(field: string) {
  const totalRenderedRows = this.gridApi.getRenderedNodes().length;
  this.headerChecked[field] = this.columnSelection[field].size === totalRenderedRows;
  // 刷新列头显示
  this.gridApi.refreshHeader();
}

4. 模板配置 #

<ag-grid-angular
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  (headerCheckboxClicked)="onHeaderCheckboxClicked($event)"
  (gridReady)="onGridReady($event)"
  rowSelection="none" <!-- 必须关闭默认行选择，避免联动 -->
  // 其他Grid基础配置...
></ag-grid-angular>

这个方案完全基于AG Grid的内置组件和API，不需要自定义渲染器，每列的选择状态完全独立，不会出现同行复选框联动的问题。

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