Ag栅极高亮显示单元逻辑工作不正常

Question

我使用ag网格创建了一个可编辑网格，我需要突出显示更改的单元格。我添加了以下代码：

(cellValueChanged)="onDemandsCellValueChanged($event)"

方法：

onDemandsCellValueChanged(params): void {
if (params.oldValue === params.newValue) {
return;
}
params.data.modified = true; // add modified property so it can be filtered on save
const column = params.column.colDef.field;
params.column.colDef.cellStyle = { 'background-color': '#e1f9e8' }; // highlight modified cells
params.api.refreshCells({
force: true,
columns: [column],
rowNodes: [params.node],
});
}

该单元格高亮显示，但当我上下滚动时，该列中的所有单元格都高亮显示。

您可以检查stackblitz上的行为。

此外，如果你有更好的方法，我愿意接受新的解决方案。

Answer 1

我理解你的问题你可以这样实现你想要的-你应该在你的列定义中使用cellStyle，如文档中所示，对于这个代码，它在下面

cellStyle: params => {
if (
params.data["modifiedRow" +
params.node.rowIndex +"andCellKey"+ 
params.column.colDef.field]
) {
return { backgroundColor: "#e1f9e8" };
} else {
return null;
}
},

然后在这个函数onDemandsCellValueChanged中，请添加并修改这个属性modified为true，并像下面所示那样更改你的函数

onDemandsCellValueChanged(params): void {
if (params.oldValue === params.newValue) {
return;
}
const column = params.column.colDef.field;
params.data["modifiedRow" + params.rowIndex + "andCellKey" + column] = true;
params.api.refreshCells({
force: true,
columns: [column],
rowNodes: [params.node]
});
}

现在，即使在滚动时，它也应该可以工作。以下是堆叠式的完整工作示例