AG-Grid实现复选框多选行与点击行高亮（不勾选复选框）方案咨询

首先明确核心问题：AG-Grid默认行点击会触发选中行为，得先关掉这个默认行为，再单独实现行点击高亮，同时保留复选框的选中功能。

步骤1：禁用行点击触发选中 #

给AG-Grid添加suppressRowClickSelection={true}属性，这样点击行的任何区域（除了复选框）都不会触发行选中，只有点击复选框才会选中行。

步骤2：实现行点击动态高亮 #

用rowClassRules结合状态管理来实现动态高亮，这比静态的rowStyles更适合这种交互场景。以下是React环境下的完整示例：

组件代码

import { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const MyGrid = () => {
  // 记录当前高亮的行ID
  const [highlightedRowId, setHighlightedRowId] = useState(null);

  const columnDefs = [
    {
      headerName: '',
      field: 'checkbox',
      checkboxSelection: true,
      headerCheckboxSelection: true,
      width: 60
    },
    { headerName: '姓名', field: 'name' },
    { headerName: '年龄', field: 'age' }
  ];

  const rowData = [
    { id: 1, name: '张三', age: 28 },
    { id: 2, name: '李四', age: 32 },
    { id: 3, name: '王五', age: 25 }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400 }}>
      <AgGridReact
        rowSelection="multiple"
        suppressRowClickSelection={true} // 禁用行点击选中
        rowClassRules={{
          // 匹配高亮行ID时应用样式类
          'highlighted-row': params => params.node.id === highlightedRowId
        }}
        onCellClicked={(params) => {
          // 仅当点击的不是复选框列时，更新高亮行
          if (params.colDef.field !== 'checkbox') {
            setHighlightedRowId(params.node.id);
          }
        }}
        columnDefs={columnDefs}
        rowData={rowData}
        // 确保行有唯一ID（如果你的rowData里id字段不是'id'，要设置getRowId）
        getRowId={params => params.data.id}
      />
    </div>
  );
};

export default MyGrid;

自定义高亮样式

在CSS里添加：

.highlighted-row {
  background-color: #cce5ff !important; /* 蓝色背景，可根据需求调整深浅 */
}

关键说明 #

• suppressRowClickSelection是核心，它分离了行点击和选中操作，让复选框成为唯一的选中触发点。
• rowClassRules支持动态判断行是否符合条件，比rowStyles的静态样式更灵活，适合处理点击交互后的动态样式变化。
• 如果需要支持多行高亮，只需把highlightedRowId改成数组，点击时切换行ID在数组中的存在状态，然后在rowClassRules里判断ID是否在数组中即可。

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