行更新后隐藏 Ag-grid 中的空组答案

【问题标题】：Hide empty group in Ag-grid after row update行更新后隐藏 Ag-grid 中的空组
【发布时间】：2021-04-12 12:22:15
【问题描述】：

如何在updateRowData 之后从 ag-grid 中删除空组。在 plnkr 示例中，我正在修改行的国家/地区值，我希望更改组名，但会创建一个新组。

修改国名代码：

let toBeUpdate = [];

this.gridApi.forEachNode((rowNode, index) => {
  if(rowNode.data && rowNode.data.athlete == 'Sadiq Khoja'){

    var data = rowNode.data;
    data.country = 'AAA Unknown X';
    toBeUpdate.push(data);
  }
});

this.gridApi.updateRowData({update:toBeUpdate});

https://plnkr.co/edit/PTuwR5zejS2xiLIg

（按“添加”按钮更改国家/地区名称）

【问题讨论】：

标签： grouping ag-grid ag-grid-angular

【解决方案1】：

UpdateRowData 在没有行组时起作用。在这种情况下，不要使用 updateRowData 尝试使用 setRowData - this.gridApi.setRowData(toBeUpdate);

这还将刷新网格以反映行中的更改。

有关更多信息，您可以在此处阅读 - https://www.ag-grid.com/documentation/javascript/data-update/

【讨论】：

这也有效，但有没有办法避免在调用setRowData后折叠所有组？

【解决方案2】：

更新数据的正确方法是在rowNode 上使用setDataValue（请参阅here）。

更新数据后，您需要通过调用 refreshClientSideRowModel 来刷新视图以通过 api 进行分组。

所以你的更新函数应该如下：

this.gridApi.forEachNode((rowNode, index) => {
  if(rowNode.data && rowNode.data.athlete == 'Sadiq Khoja'){
    rowNode.setDataValue('country', 'AAA Unknown X');
  }
});

this.gridApi.refreshClientSideRowModel('group');

Demo

【讨论】：

这可行，但唯一的问题是它会折叠所有组。我认为 refreshClientSideRowModel 是造成这种情况的原因