[英]Ag-grid highlight cell logic not working properly
I created an editable grid using ag-grid and I need to highlight the cells that were changed.我使用ag-grid创建了一个可编辑的网格,我需要突出显示已更改的单元格。 I added the following code:
我添加了以下代码:
(cellValueChanged)="onDemandsCellValueChanged($event)"
And the method:和方法:
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],
});
}
The cell is highlighted but when I scroll up and down all the cell from that column are highlighted.该单元格被突出显示,但是当我向上和向下滚动时,该列中的所有单元格都被突出显示。
You can check the behavior on stackblitz .您可以检查stackblitz上的行为。
Also if you have a better way of doing this I'm open to new solutions.此外,如果您有更好的方法,我愿意接受新的解决方案。
I understand your problem You can achieve what you want like this - you should use cellStyle
in your column definition as showing indocs and for this code is below我了解您的问题您可以像这样实现您想要的-您应该在列定义中使用
cellStyle
,如文档中所示,此代码如下
cellStyle: params => {
if (
params.data["modifiedRow" +
params.node.rowIndex +"andCellKey"+
params.column.colDef.field]
) {
return { backgroundColor: "#e1f9e8" };
} else {
return null;
}
},
and after that in this function onDemandsCellValueChanged
please add and modify this property modified
as true and change your function like this as shown below然后在此
onDemandsCellValueChanged
中添加并修改此属性modified
为 true 并更改您的 function 如下所示
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]
});
}
Now it should work even when you scroll.现在,即使您滚动它也应该可以工作。 Here is complete working Example on stackblitz
这是关于 stackblitz 的完整工作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.