如何通过点击按钮控制ag-Grid行样式/行类的开关切换

核心逻辑是通过状态变量控制行样式规则的生效条件，按钮点击切换状态后触发表格重新计算行样式即可，不需要改写原有规则的核心判断逻辑。

1. 先定义状态标记存储高亮开关状态

// 组件/全局作用域下定义，默认关闭分级高亮
let isGradeStyleOn = false;
// 提前存好ag-Grid初始化返回的api实例，方便后续调用
let gridApi = null;

// 表格初始化时拿到api
const gridOptions = {
  // 你原来的其他配置...
  onGridReady: (params) => {
    gridApi = params.api;
  }
}

2. 修改原有rowClassRules配置，增加开关判断
   开关关闭时所有样式规则直接返回false，不会给行追加对应class；开关打开时才走原来的Grade值判断逻辑：

rowClassRules: {
  "a-grade": params => isGradeStyleOn && params.api.getValue("Grade", params.node) === 'A',
  "b-grade": params => isGradeStyleOn && params.api.getValue("Grade", params.node) === 'B',
  "c-grade": params => isGradeStyleOn && params.api.getValue("Grade", params.node) === 'C',
},

3. 绑定按钮点击事件
   点击按钮时切换开关状态，调用表格刷新方法触发行样式重算：

// 开启样式按钮
document.getElementById('enableStyleBtn').onclick = () => {
  isGradeStyleOn = true;
  // 强制刷新单元格触发行样式重算
  gridApi.refreshCells({ force: true });
}

// 关闭样式按钮
document.getElementById('disableStyleBtn').onclick = () => {
  isGradeStyleOn = false;
  gridApi.refreshCells({ force: true });
}

补充说明 #

• 提前定义好三个分级对应的CSS样式类，否则即使规则生效也看不到背景变化：

.a-grade { background: #dcfce7; }
.b-grade { background: #fef3c7; }
.c-grade { background: #fee2e2; }

• 如果要做单按钮切换，只需要把点击逻辑改成isGradeStyleOn = !isGradeStyleOn再执行刷新即可，不需要单独写开/关两个按钮。
• 低版本ag-Grid如果refreshCells不生效，可以替换成gridApi.redrawRows()方法重绘所有行。

内容的提问来源于stack exchange，提问作者Сергей Якушин