如何动态添加行样式？ - 银格

Question

我想在 ag-grid 中动态更改一行的样式。我想要实现的是，如果用户编辑了我的 ag-grid 行，则更改该行的背景颜色。

cellValueChanged(event) {
  //Add it only if the old value has changed
  if (event.oldValue != event.newValue) {
     // This will replace with latest edited value if it has been edited already
     this.edittedRows[event.rowIndex.toString()] = event.data;
  }
}

我通过监听 cellValueChanged 事件来跟踪编辑的行。我需要在这里更改行样式。

我查看了 ag-grid 文档并找到了如何添加行样式、行 classes 和行 class 规则，但是当用户对其进行了更改。

Answer 1

在您的 CellValueChanged 函数中添加以下行：

gridOptions.rowStyle = {background: 'coral'};

cellValueChanged(event) {
  //Add it only if the old value has changed
  if (event.oldValue != event.newValue) {
     // This will replace with latest edited value if it has been edited already
     this.edittedRows[event.rowIndex.toString()] = event.data;
     gridOptions.rowStyle = {background: 'coral'};
  }
}

Plunker - https://plnkr.co/edit/i1K3YXpGGgNEOU2JjZCf?p=preview

Answer 2

通过使用 redrawRows 我能够做到这一点。
首先，我为我的网格选项添加了 rowClassRules，如下所示

private initGrid() {
   this.gridOptions.rowClassRules = {
      'modified' : this.isEditedRow()
   };
}

private isEditedRow() {
   return (params) => {
      return params.data.edited;
   }
}

modified 是我的 css class，它具有编辑行的所有样式。
然后在我的行数据中添加一个新的属性 edited。并更改 cellValueChanged 如下，

cellValueChanged(event) {
  //Add it only if the old value has changed
  if (event.oldValue != event.newValue) {
     // This will replace with latest edited value if it has been edited already

     // Setting edited flag to change the background
     event.data.edited = true;
     this.edittedRows[event.rowIndex.toString()] = event.data;
     let row = this.gridApi.getDisplayedRowAtIndex(event.rowIndex);
     this.gridApi.redrawRows({ rowNodes: [row] });
  }

}

查找 redrawRows 的文档 here。

如何动态添加行样式？ - 银格

How to add a row style dynamically ? - Ag-grid

ag-grid