Ag-grid中禁用复选框选择：如何保留渲染时选中行且禁止取消？

嘿，这个需求我之前在项目里也碰到过，ag-Grid确实没有直接的一键配置项，但我们可以通过组合内置渲染器和简单的参数设置来完美实现！

核心思路 #

我们要达成两个关键目标：

1. 保留渲染时已选中的行，且用户完全无法取消这些行的选中状态
2. 复选框正常显示，但处于禁用状态（不是隐藏），同时禁止用户选择新的行

具体实现步骤 #

1. 配置复选列，禁用复选框交互

使用ag-Grid内置的agCheckboxCellRenderer，通过cellRendererParams.disabled禁用所有复选框的交互，同时禁用表头复选框防止全选/取消全选操作：

this.gridOptions = {
  // 你的基础配置（比如columnDefs、rowData等）
  rowSelection: 'multiple', // 根据需求选择single或multiple
  suppressRowClickSelection: true, // 禁止点击行改变选中状态
  columnDefs: [
    {
      headerName: '',
      width: 50,
      checkboxSelection: true,
      cellRenderer: 'agCheckboxCellRenderer',
      cellRendererParams: {
        // 让所有复选框处于禁用状态
        disabled: () => true
      },
      suppressHeaderCheckboxSelection: true // 禁用表头的全选复选框
    },
    // 你的其他列定义...
  ]
};

2. 设置初始选中的行

在网格初始化完成的回调（比如onGridReady）中，手动设置需要保留选中状态的行：

onGridReady(params) {
  const gridApi = params.api;
  // 假设你有存储初始选中行ID的数组
  const initialSelectedIds = [1, 3, 5]; // 示例ID
  
  gridApi.forEachNode(node => {
    if (initialSelectedIds.includes(node.data.id)) {
      node.setSelected(true, false); // 第二个参数设为false，避免触发selectionChanged事件
    }
  });
}

3. 额外防护（可选）

如果要彻底杜绝任何选中状态的意外变更，可以监听selectionChanged事件并强制重置选中状态：

this.gridOptions.onSelectionChanged = (params) => {
  const gridApi = params.api;
  const initialSelectedIds = [1, 3, 5];
  
  // 强制保留初始选中的行，取消其他所有变更
  gridApi.forEachNode(node => {
    const shouldBeSelected = initialSelectedIds.includes(node.data.id);
    if (node.isSelected() !== shouldBeSelected) {
      node.setSelected(shouldBeSelected, false);
    }
  });
};

最终效果 #

• 所有复选框正常显示，但点击无任何反应（禁用状态）
• 初始选中的行保持选中样式，用户无法取消
• 点击行也不会改变选中状态，彻底锁定选择结果

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