我想在一个网格中,当单元格的旧值 !=单元格的新值时,改变单元格的颜色。
我已经试过了,但当点击保存或重新加载数据时,它的颜色变成了绿色。
if (e.oldValue === e.newValue) {
e.colDef.cellStyle = function(e) {return { backgroundColor: 'green' };
}
但当点击保存或重新加载数据时,它将列的颜色改为绿色。
Ag-grid没有一个内置的功能来高亮已编辑的单元格,你可以用两种方法来解决这个问题。
动态更新单元格样式-------------------。
onCellValueChanged(params) {
if (params.oldValue !== params.newValue) {
var column = params.column.colDef.field;
params.column.colDef.cellStyle = { 'background-color': 'cyan' };
params.api.refreshCells({
force: true,
columns: [column],
rowNodes: [params.node]
});
}}
使用以下组合 cellClassRules
,一个编辑标志和 onCellValueChanged
-
为已编辑的单元格定义一个css类。.green-bg {background-color: olivedrab;}
为该列定义cellClassRules,它根据你在编辑时更新的标志来应用样式。cellClassRules: {
'green-bg': (params) => { return params.data.isEdited}
}
onCellValueChanged
诸如此类 onCellValueChanged(params) {
if (params.oldValue !== params.newValue) {
params.data.isEdited = true; // set the flag
}
params.api.refreshCells(); //causes styles to be reapplied based on cellClassRules
}