如何动态添加行样式? - Ag-grid

时间:2018-04-17 02:01:09

标签: ag-grid

我想在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文档,并找到了如何添加行样式,行类和行类规则,但是当用户更改了某些内容时,我无法找到一种动态添加样式的方法它

2 个答案:

答案 0 :(得分:3)

通过使用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的文档。

答案 1 :(得分:0)

在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