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