Ag-Grid Angular中如何实现单元格点击选行且保留已选状态

我之前刚好处理过一模一样的需求，其实问题出在Ag-Grid默认的单元格点击选中逻辑上，只要手动调整一下行选中的控制方式就能解决。下面是具体的实现步骤和代码示例：

1. 确保Grid已开启多选模式 #

首先得确认你的Grid配置里已经开启了多选，也就是把rowSelection设为multiple，这是基础前提（你已经有复选框多选，应该已经配置了，但还是提一下）：

const gridOptions = {
  rowSelection: 'multiple',
  checkboxSelection: true, // 你已有的复选框选行配置
  // 其他Grid配置...
};

2. 重写单元格点击的选中逻辑 #

默认情况下，哪怕开启了多选，点击普通单元格时Ag-Grid还是会清空之前所有选中的行，只选中当前行——这就是你丢失选中状态的原因。我们需要绑定cellClicked事件，手动控制行的选中状态：

const gridOptions = {
  // 其他配置...
  onCellClicked: (event) => {
    // 获取当前点击的行节点
    const targetRow = event.node;
    // 切换当前行的选中状态，第二个参数传true是核心：保留其他已选中的行
    targetRow.setSelected(!targetRow.isSelected(), true);
  }
};

核心原理 #

这里用到的rowNode.setSelected()方法，第二个参数keepExisting决定了是否保留之前的选中状态：

• 传true：只修改当前行的选中状态，其他已选中的行完全不受影响，和点击复选框的行为完全一致；
• 不传或传false：会先清空所有选中的行，再选中当前行，这就是默认的单选逻辑。

3. 可选：避免复选框列重复触发 #

如果你不想让点击复选框列的时候触发两次选中逻辑（毕竟复选框本身已经会处理选中），可以在事件里加个判断，跳过复选框列的处理：

onCellClicked: (event) => {
  // 判断当前点击的列是不是复选框列，是就跳过
  if (event.column.getColDef().checkboxSelection) {
    return;
  }
  const targetRow = event.node;
  targetRow.setSelected(!targetRow.isSelected(), true);
}

这样处理之后，点击普通单元格就和点击复选框的效果完全一样了——既能切换当前行的选中状态，又能完整保留之前选中的所有行~

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