Ag grid 如何动态添加行样式？-银栅

我想在ag网格中动态更改行的样式。我试图实现的是，如果用户编辑了ag网格行，则更改该行的背景色

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文档，找到了如何添加行样式、行类和行类规则，但我找不到一种方法，当用户更改了某个行的样式时，可以动态地将其添加到该行中。

在CellValueChanged函数中添加以下行：

gridOptions.rowStyle={background:'coral'}

普朗克-

---

在CellValueChanged函数中添加以下行：

gridOptions.rowStyle={background:'coral'}

普朗克-

---

通过使用

重画行

我能够实现这一点。
首先，我为我的网格选项添加了

rowClassRules

，如下所示

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

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

modified

是我的css类，它具有编辑行的所有样式。
然后在我的行数据中添加一个新属性

edited

。 并将

单元格值更改为
，如下所示

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] });
  }

}

查找重新绘制的文档。
通过使用
重新绘制
我能够实现这一点。


首先，我为我的网格选项添加了
rowClassRules
，如下所示

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

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

modified
是我的css类，它具有编辑行的所有样式。


然后在我的行数据中添加一个新属性
edited
。
并将
单元格值更改为
，如下所示

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] });
  }

}

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