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

Question

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

似乎找不到任何有关访问的特定文档，例如 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

我在我正在做的一个项目上做了这个。

您可以在列定义中定义一个cellClass属性（ https://www.ag-grid.com/javascript-grid-cell-styles/ ），它可以使用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使用可重复使用的 function。

无论单元ag-cell-was-modified是否被修改，并且在您的 style.scss 或主样式表中，您可以添加：

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

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