如何更改已在 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，你可以把这个类定义放在更合适的地方。