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

【问题标题】：How to add a row style dynamically ? - Ag-grid如何动态添加行样式？ - 银网格
【发布时间】：2018-09-26 20:49:32
【问题描述】：

我想在 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 文档并找到了如何添加行样式、行类和行类规则，但是当用户对其进行更改时，我无法找到一种方法来动态地向行添加样式。

【问题讨论】：

标签： ag-grid

【解决方案1】：

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

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

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

modified 是我的 css 类，它具有编辑行的所有样式。
然后在我的行数据中添加一个新属性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 的文档。

【讨论】：

【解决方案2】：

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

gridOptions.rowStyle = {背景：'珊瑚'};

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

【讨论】：

它从第二次编辑开始工作。在您的 plunkr 示例中，如果我最初编辑某些内容，它不会更改样式，但从第二次编辑开始会更改。
更改 gridOption 的 rowStyle 将影响整个网格。对于更改后添加的所有行，即使未编辑，也将获得此样式。并且更改它不会影响最初编辑的行，但会影响接下来编辑的行。
@Senal - 你想要什么？编辑单元格后，您不希望行具有不同的样式吗？此代码只是将背景颜色添加到已编辑的行。
是的，我希望在编辑单元格后行具有不同的样式。从gridOptions.rowStyle = {background: 'coral'}; 开始，我们将在第一个cellValueChanged 事件之后更改整个网格的rowStyle，因此它将为已编辑的行和所有新创建的行添加此样式。我想在我编辑的行中添加一个样式。