如何在Angular的ag-grid中根据行内不同复选框设置行颜色？

这个需求我之前做过类似的，其实核心就是利用AG-Grid的行样式规则结合复选框的变更事件来实现，下面给你一步步拆解方案：

核心思路 #

我们要给每个复选框列绑定值变更事件，当用户勾选/取消某个复选框时，更新当前行的状态标识字段，然后通过AG-Grid的rowClassRules配置，根据这个状态字段来动态给行添加对应的CSS样式类，从而实现行颜色的切换。

具体实现步骤 #

1. 准备行数据与状态字段 #

首先，在你的行数据里新增一个状态字段（比如activeColorType），用来标记当前行应该显示的颜色类型，初始值可以设为空或者默认值：

const rowData = [
  { id: 1, checkbox1: false, checkbox2: false, checkbox3: false, activeColorType: '' },
  { id: 2, checkbox1: false, checkbox2: false, checkbox3: false, activeColorType: '' },
  // 更多行数据...
];

2. 配置复选框列 #

给每个复选框列开启checkboxSelection，并绑定onCellValueChanged事件来处理勾选后的状态更新。这里要注意，我们需要区分是哪个复选框触发的变更：

const columnDefs = [
  { 
    headerName: '复选框1', 
    field: 'checkbox1', 
    checkboxSelection: true,
    onCellValueChanged: params => handleCheckboxChange(params, 'red')
  },
  { 
    headerName: '复选框2', 
    field: 'checkbox2', 
    checkboxSelection: true,
    onCellValueChanged: params => handleCheckboxChange(params, 'blue')
  },
  { 
    headerName: '复选框3', 
    field: 'checkbox3', 
    checkboxSelection: true,
    onCellValueChanged: params => handleCheckboxChange(params, 'green')
  },
  // 其他列...
];

3. 实现复选框变更处理函数 #

这个函数的作用是：当复选框被勾选时，更新当前行的activeColorType字段；如果被取消勾选，判断是否还有其他复选框被勾选，再决定是否重置状态：

const handleCheckboxChange = (params, colorType) => {
  const { data } = params;
  // 如果当前复选框被勾选，设置对应的颜色类型
  if (params.newValue) {
    data.activeColorType = colorType;
  } else {
    // 如果取消勾选，检查是否还有其他复选框处于勾选状态，有则保留最后一个的颜色，否则清空
    if (data.checkbox1) data.activeColorType = 'red';
    else if (data.checkbox2) data.activeColorType = 'blue';
    else if (data.checkbox3) data.activeColorType = 'green';
    else data.activeColorType = '';
  }
  // 通知AG-Grid更新行数据，触发样式重绘
  params.api.refreshCells({ rowNodes: [params.node], force: true });
};

4. 配置行样式规则 #

在gridOptions里设置rowClassRules，根据activeColorType的值匹配对应的CSS类：

const gridOptions = {
  columnDefs,
  rowData,
  rowClassRules: {
    'row-red': params => params.data.activeColorType === 'red',
    'row-blue': params => params.data.activeColorType === 'blue',
    'row-green': params => params.data.activeColorType === 'green'
  },
  // 其他AG-Grid配置...
};

5. 编写CSS样式 #

最后定义对应的行颜色样式：

.row-red {
  background-color: rgba(255, 0, 0, 0.1);
}
.row-blue {
  background-color: rgba(0, 0, 255, 0.1);
}
.row-green {
  background-color: rgba(0, 255, 0, 0.1);
}

注意事项 #

• 多复选框优先级：上面的示例中，当多个复选框同时勾选时，会保留最后一个被勾选的颜色；如果需要设置固定优先级（比如复选框1优先级最高），可以在handleCheckboxChange里调整判断逻辑。
• 样式叠加：如果需要同时显示多个颜色（比如勾选两个复选框时行显示混合色），可以把activeColorType改成数组，然后在rowClassRules里匹配多个类。
• 性能优化：使用refreshCells时指定rowNodes参数，避免全局刷新，提升性能。

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