ag-grid服务器端分页：点击表头复选框实现多页行全选并获取ID

核心思路 #

服务端分页模式下，Ag-Grid仅会加载当前页的数据，内置的getSelectedNodes()/getSelectedRows()只能返回当前页的选中项。要实现跨页多选，必须自行维护一个全局的选中ID集合，同时监听表头、行复选框的交互事件同步更新集合，再配合页面切换时的状态同步逻辑。

具体实现步骤 #

1. 声明全局状态变量 #

在组件中定义两个核心变量，用于存储跨页选中状态：

// 存储所有跨页选中的行ID
const [selectedRowIds, setSelectedRowIds] = useState(new Set());
// 标记是否处于全选状态，控制表头复选框显示
const [isAllSelected, setIsAllSelected] = useState(false);

2. 配置Ag-Grid列与复选框 #

给首列配置复选框，并自定义表头复选框的点击逻辑：

const columnDefs = [
  {
    headerName: '',
    field: 'id',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    headerCheckboxSelectionFilteredOnly: false,
    // 覆盖默认表头复选框点击事件
    headerComponentParams: {
      onHeaderCheckboxClicked: (params) => handleHeaderToggle(params)
    }
  },
  // 其他业务列配置...
];

3. 处理表头全选/取消全选 #

分两种场景处理：

场景1：可批量获取所有行ID

如果后端支持返回全量数据ID，直接将所有ID存入全局集合：

const handleHeaderToggle = async (params) => {
  if (!isAllSelected) {
    // 调用接口获取所有页的行ID
    const allIds = await fetchAllRowIds();
    setSelectedRowIds(new Set(allIds));
    setIsAllSelected(true);
  } else {
    setSelectedRowIds(new Set());
    setIsAllSelected(false);
  }
  // 更新当前页行的选中状态
  params.api.forEachNode(node => node.setSelected(selectedRowIds.has(node.data.id)));
};

场景2：数据量过大，无法批量获取全量ID

此时仅标记全选状态，后续提交时告知后端处理全选逻辑：

const handleHeaderToggle = (params) => {
  const newAllSelected = !isAllSelected;
  setIsAllSelected(newAllSelected);
  setSelectedRowIds(new Set()); // 清空手动选中的ID，全选优先级更高
  // 同步当前页所有行的选中状态
  params.api.forEachNode(node => node.setSelected(newAllSelected));
};

4. 处理单行复选框交互 #

监听rowSelected事件，同步更新全局选中ID集合：

const onRowSelected = (params) => {
  // 若处于全选状态，点击单行则取消全选标记
  if (isAllSelected) {
    setIsAllSelected(false);
  }
  const updatedIds = new Set(selectedRowIds);
  if (params.node.isSelected()) {
    updatedIds.add(params.data.id);
  } else {
    updatedIds.delete(params.data.id);
  }
  setSelectedRowIds(updatedIds);
};

5. 切换页面时同步选中状态 #

监听modelUpdated事件（页面切换、数据加载完成后触发），将新页面的行与全局选中状态同步：

const onModelUpdated = (params) => {
  if (isAllSelected) {
    params.api.forEachNode(node => node.setSelected(true));
  } else {
    params.api.forEachNode(node => node.setSelected(selectedRowIds.has(node.data.id)));
  }
};

6. 获取所有选中数据/ID #

• 手动多选场景：直接从selectedRowIds集合提取，如Array.from(selectedRowIds)
• 全选场景：若提前获取了全量ID则直接使用，否则提交请求时告知后端“处理全选数据”，由后端返回对应结果

关键注意事项 #

• 服务端分页下，Ag-Grid不会保留非当前页的行数据，必须依赖自定义的全局ID集合维护选中状态
• 数据量极大时，避免一次性加载全量ID，优先采用“全选标记+后端处理”的方案，防止前端内存溢出
• 过滤、排序操作后，同样需要触发状态同步，确保当前页行的选中状态正确

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