Question

我查看了ag-grid文档，但没有找到解决我问题的方法。

我想让行在更改事件时更改样式，换句话说，将其标记为脏。

当前我的代码是这样的：

component.html：

<ag-grid-angular
    class="ag-theme-material table"
    [gridOptions]="gridOptions"
    (gridReady)="onGridReady($event)"
    (cellValueChanged)="cellValueChanged($event)">
</ag-grid-angular>

component.ts

onGridReady(params) {
    this.gridApi = params.api;
}

cellValueChanged(e) {
    const { data, oldValue, newValue } = e;

    if (newValue != oldValue) {
      this.gridOptions.rowStyle = { background: "#E4FFF9" };
    }
}

问题是，在第一次更改事件中，没有应用样式，并且当我重新应用数据时，即使代码甚至没有进入“ IF”条件，所有行样式都被更改了。 / p>

先使用gridApi.setRowData（[]）然后再应用gridApi.setRowData（data）来应用数据。

private dataChange() {
    this.buyerGridApi.setRowData([]);
    let gridData = [];

    gridData = [...some code]

    this.gridApi.setRowData(gridData);
}

Answer 1

您可以使用getRowStyle在数据更改后动态获取行样式。参见https://vuetifyjs.com/en/customization/sass-variables/#vue-cli-install

在您的情况下，我将使用rowNode.setData在数据上设置一个脏属性。这将触发该行的重新渲染，并将重新运行getRowStyle函数。参见https://www.ag-grid.com/javascript-grid-row-styles/#refresh-of-styles

这是一个简单的示例，其中单击一行将设置一个肮脏的属性并更改样式：https://www.ag-grid.com/javascript-grid-data-update/#updating-rownodes-data

如何在事件中更改Ag-Grid的样式？

1 个答案: