如何在Ag Grid中实现操作列禁用行选择并保留其他列Shift多选

要实现点击固定操作列不触发行选择、其他列保留Shift键多行选择的需求，可通过Ag Grid的列配置和事件处理结合实现，具体步骤如下：

1. 配置操作列的核心属性 #

给固定操作列添加suppressRowClickSelection: true，直接禁止该列的单元格点击触发行选择行为，同时设置唯一colId用于后续识别：

const columnDefs = [
  {
    colId: 'actionColumn',
    headerName: '操作',
    pinned: 'left', // 标记为左侧固定列
    suppressRowClickSelection: true, // 关键：点击该列单元格不触发行选择
    cellRenderer: (params) => {
      return `
        <button onclick="handleEdit(${params.data.id}, event)">编辑</button>
        <button onclick="handlePrint(${params.data.id}, event)">打印</button>
      `;
    }
  },
  // 其他常规列配置
  { headerName: '商品名称', field: 'productName' },
  { headerName: '单价', field: 'price' },
  { headerName: '数量', field: 'count' }
];

2. 阻止操作按钮的事件冒泡 #

操作列内的按钮点击事件需要添加event.stopPropagation()，避免事件冒泡到行级别意外触发行选择：

function handleEdit(id, event) {
  event.stopPropagation(); // 阻止事件向上冒泡
  // 执行编辑逻辑，比如打开弹窗
  console.log(`编辑ID为${id}的行`);
}

function handlePrint(id, event) {
  event.stopPropagation();
  // 执行打印逻辑
  console.log(`打印ID为${id}的行项`);
}

如果使用React/Vue等框架的组件式单元格渲染，直接在按钮的点击事件中阻止冒泡即可：

// React示例
const ActionCellRenderer = (params) => {
  const handleEdit = (e) => {
    e.stopPropagation();
    // 编辑逻辑
  };

  return (
    <div className="action-buttons">
      <button onClick={handleEdit}>编辑</button>
      <button onClick={(e) => {e.stopPropagation(); /* 打印逻辑 */}}>打印</button>
    </div>
  );
};

3. 保留全局多选与Shift选择行为 #

确保表格开启多选模式，Ag Grid默认支持Shift键连续选择多行，只需在gridOptions中配置：

const gridOptions = {
  columnDefs,
  rowData: yourRowData,
  rowSelection: 'multiple', // 开启多行选择
  // 其他表格配置
};

效果验证 #

• 点击操作列的按钮或单元格空白区域，均不会触发行选择
• 点击其他任意列的单元格，可正常选中单行；按住Shift键点击可连续选中多行

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