Логика выделения ячеек Ag-grid не работает должным образом
Я создал редактируемую сетку с помощью ag-grid, и мне нужно выделить ячейки, которые были изменены. Я добавил следующий код:
(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.
Также, если у вас есть лучший способ сделать это, я открыт для новых решений.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я понимаю вашу проблему. Вы можете добиться того, чего хотите, вот так - вы должны использовать cellStyle в определении столбца, как показано в документах, и для этого кода ниже
cellStyle: params => {
if (
params.data["modifiedRow" +
params.node.rowIndex +"andCellKey"+
params.column.colDef.field]
) {
return { backgroundColor: "#e1f9e8" };
} else {
return null;
}
},
и после этого в этой функции onDemandsCellValueChanged добавьте и измените это свойство modified как истинное и измените свою функцию, как показано ниже.
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]
});
}
Теперь он должен работать даже при прокрутке. Вот полный рабочий пример на stackblitz
Привет @NicuVlad, я обновил пример, теперь вы можете попробовать верхний рабочий пример на stackblitz, и если вы найдете этот ответ полезным, примите этот ответ.
Спасибо! Это было лучшее решение, которое я смог найти для выделения измененных ячеек. Однако он ломается при удалении строк. Есть идеи, как это исправить?
Нет необходимости добавлять номер строки к измененному ключу, потому что params.data содержит только данные измененной строки. Отсутствие номера строки делает это также работающим, когда строки удаляются (в противном случае выделение разрывов из-за изменения номеров строк).
Спасибо за Ваш ответ! Это решило проблему прокрутки вверх и вниз. Но теперь это происходит, когда я прокручиваю вправо или влево. Вы можете проверить это поведение на своем примере stackblitz. У вас есть решение для этого?