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

Question

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

似乎找不到任何关于访问 html 元素或受影响单元格样式的特定文档。

有人有什么想法吗？

Answer 1

我在我正在从事的项目中这样做了。

您可以在列定义 (https://www.ag-grid.com/javascript-grid-cell-styles/) 中定义 cellClass 属性，它可以使用 params: CellClassParams.[=17 的回调函数=]

所以尝试这样做：

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 的 re-usable 函数。

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

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

当然，如果你使用SASS，你可以把这个class定义放在更合适的地方。

Answer 2

您可以使用 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
  },
};

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

How to change styling of cells that has been edited in ag-Grid?

javascript

ag-grid

angular

在您的 css 文件中

现场演示