Question

根据documentation ag-grid列定义可用于更新cell css类。 colDef对象在列事件中可用，即newValueHandler和cellValueChanged。我试图用它来添加/删除css类。

适用于 newValueHandler 但不适用于 onCellValueChanged 。我可以看到这两个事件都暴露了一个colDef对象，但以下只适用于newValueHandler：

dropdownValueUpdateHandler(p, key) {
        this.svc.updateProductField(p.data.ID, p.colDef.field, p.newValue.code)
            .catch(err => {
                p.colDef.cellClass = 'ag-etp-cell-failed'; // <---- updating cell to show error

最后一行在第一个事件中起作用，但在单元格值更改事件中它不执行任何操作。

更新：尝试使用动态功能，但也无法正常工作（或者我做错了）

getCellClass(p){
    console.debug('getCellClass ', p);
    return p.data.Status == 'saved'
        ? 'ag-etp-cell-saved'
        : p.data.Status == 'failed'
            ? 'ag-etp-cell-failed'
            : '';

}

在我的valueUpdatedHanler成功：

e.data.Status = 'saved';
e.api.refreshCells([ e.node] , [e.colDef.field]); // this has a weird lag, doesn't refresh correct, doesn't seem to call getCellClass function
e.api.refreshView(); // this works but refreshes the whole grid which can be costly

更新类型的工作，但后续事件似乎滞后，即如果以前的事件是失败，下一次成功仍然会以失败风格返回

如果我刷新整个网格，它就可以了。但我希望避免这样做，因为它是一个很大的网格..

Answer 1

更新列定义时，必须告知ag-grid要刷新以获取更改。您可以通过调用gridAPI.refreshView()来刷新整个网格，或gridAPI.refreshCells(rowNodes, colIds)来刷新该单元格。

CellClass只会向单元格添加类而不删除以前添加的类。

您可能希望使用cellClassRules来处理更复杂的规则

cellClassRules : {
    'ag-etp-cell-failed': function(params) { return params.data.Status === 'failed' },
//etc
},

ag-grid colDef在事件之间出现不一致

1 个答案: