下拉列表中的ag-grid列行分组

Question

我在我的angular 7项目中使用ag-grid库来创建网格，它在其<ag-grid-angular [rowGroupPanelShow]="rowGroupPanelShow"></ag-grid-angular>选择器中具有一个属性，如前所述，它是rowGroupPanelShow以上。

通过使用此属性，用户可以使用ag-grid enable拖放选项，并且只需拖放任何列，ag-grid就会按该特定列对所有行进行分组。

但是，我不想每次用于将行与特定列分组时都将其拖放。 我想通过使用一个简单的下拉菜单来执行所有这些操作，其中下拉菜单将包含类似于网格中列的值，并且当用户从下拉菜单中选择任何值时，ag-grid应该将与该选定值匹配的所有行分组到ag中-网格列。

最近10个小时以来，我一直在努力解决问题。 我也在ag-grid官方网站上搜索了很多。 但是我没有解决任何问题。

我现在正在遵循的方法可以在本文所附的图像中看到。

Answer 1

我想您错过了grid-column-API文档

列行组的管理方法： getRowGroupColumns() ， addRowGroupColumn(colKey) ， addRowGroupColumns(colKeys) ， removeRowGroupColumn(colKey) ， removeRowGroupColumns(colKeys) ， setRowGroupColumns(colKeys) ， moveRowGroupColumn(fromIndex, toIndex)

因此，要实现下拉方案，您必须注意在下拉更改中add和remove分组。 （*可能不是，但是我们那样做）

<select (change)="onChange($event.target.value)">
    <option value="null">Select group</option>
    <option value="year">Year</option>
    <option value="country">Country</option>
</select>

onChange(value){
  this.gridColumnApi.getRowGroupColumns().forEach(i=>{
    this.gridColumnApi.removeRowGroupColumn(i.colId);
  })
  this.gridColumnApi.addRowGroupColumn(value);
}

演示