如何在Ag-Grid中动态设置行样式？实现编辑行背景色变更

嘿，你已经通过cellValueChanged事件准确跟踪到了编辑过的行，这步铺垫做得很棒！接下来要实现编辑行动态变背景色，有两种实用的方式，我给你一步步拆解：

方法一：利用rowClassRules配置（推荐，更简洁） #

Ag-Grid内置了rowClassRules配置项，能直接根据条件给行绑定CSS类，非常适合这种简单的“标记已编辑行”场景。

步骤1：定义CSS样式 #

先在样式文件里写好要应用的背景色样式：

.editted-row {
  background-color: #f0f8ff; /* 这里用浅蓝色，你可以换成任何喜欢的颜色 */
}

步骤2：配置gridOptions #

在你的grid配置里添加rowClassRules，同时别忘了在编辑后刷新行样式：

// 假设你的gridOptions是这样定义的
gridOptions = {
  // 其他已有的配置（比如列定义、数据源等）...
  rowClassRules: {
    // 判断当前行的rowIndex是否在已编辑记录里，是就应用editted-row类
    'editted-row': params => {
      return !!this.edittedRows[params.rowIndex.toString()];
    }
  },
  // 你的cellValueChanged事件监听（这里补充了刷新行的逻辑）
  onCellValueChanged: (event) => {
    if (event.oldValue != event.newValue) {
      this.edittedRows[event.rowIndex.toString()] = event.data;
      // 关键：更新记录后必须手动刷新行，让Ag-Grid重新应用样式规则
      this.gridApi.refreshRows();
    }
  },
  // 别忘了保存gridApi，用来触发刷新
  onGridReady: (params) => {
    this.gridApi = params.api;
  }
};

方法二：使用getRowClass函数（更灵活） #

如果之后你需要更复杂的逻辑（比如根据编辑的内容不同设置不同背景色），可以用getRowClass函数来实现：

步骤1：同样先定义CSS样式 #

.editted-row {
  background-color: #f0f8ff;
}

步骤2：配置gridOptions #

gridOptions = {
  // 其他配置...
  getRowClass: params => {
    // 检查当前行是否在已编辑列表中
    if (this.edittedRows[params.rowIndex.toString()]) {
      return 'editted-row';
    }
    // 没有匹配的话返回空字符串或者其他类名
    return '';
  },
  onCellValueChanged: (event) => {
    if (event.oldValue != event.newValue) {
      this.edittedRows[event.rowIndex.toString()] = event.data;
      this.gridApi.refreshRows();
    }
  },
  onGridReady: (params) => {
    this.gridApi = params.api;
  }
};

关键注意点 #

• 一定要调用gridApi.refreshRows()：因为Ag-Grid不会自动监测edittedRows对象的变化，只有手动触发刷新，新的样式规则才会生效。
• 确保gridApi已正确获取：通过onGridReady事件保存api实例是最稳妥的方式。

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