如何更改已在ag-Grid中编辑的单元格的样式？

Question

我想标记已编辑的单元格，以便用户可以看到哪些单元格已被触摸和更改。我知道有一个单元闪光灯选项，但是只是稍微改变了背景颜色。我想要的是完成编辑后的背景颜色更改。

似乎找不到有关访问的特定文档，例如html元素或受影响单元格的样式。

有人有什么主意吗？

Answer 1

您可以使用ColDef.onCellValueChanged来检测是否有变化，并使用GridApi.refreshCells()

相应地更新单元格样式。

const columnDefs = [{
  headerName: "Athlete",
  field: "athlete",
  onCellValueChanged: this.markAsDirty
},...]

...

private markAsDirty(params: ICellRendererParams) {
  params.colDef.cellClass = (p) =>
    p.rowIndex.toString() === params.node.id ? "ag-cell-dirty" : "";

  params.api.refreshCells({
    columns: [params.column.getId()],
    rowNodes: [params.node],
    force: true // without this line, the cell style is not refreshed at the first time
  });
}

在您的CSS文件中

:host ::ng-deep .ag-cell-dirty {
  background-color: rgba(255, 193, 7, 0.5) !important;
}

如果您希望将此行为应用于所有列，则可能还需要使用defaultColDef

this.gridOptions = {
  defaultColDef: {
    editable: true,
    onCellValueChanged: this.markAsDirty
  },
};

实时演示

Answer 2

我在我正在做的项目中做到了这一点。

您可以在列定义（https://www.ag-grid.com/javascript-grid-cell-styles/）中定义一个cellClass属性，并且可以使用params: CellClassParams进行回调。

所以尝试做：

cellClass: (params: CellClassParams) => {
  // you need to have a handle on the original untouched data
  // See if the original value does not equal the modified value in params
  // For shortness, I will write pseudocode
   if (originalValue !== modifiedValue) {
     return 'ag-cell-was-modified';
   }
}

如果许多列是可编辑的，则可能希望为每个列的cellClass使用可重复使用的功能。

这应该有条件地应用类ag-cell-was-modified，无论单元是否被修改，并在您的style.scss或主样式表中，您可以添加：

.ag-cell-was-modified {
  background: red;
}

当然，如果您使用的是SASS，则可以将此类定义放在更合适的位置。