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

Question

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

通过使用此属性，ag-grid为用户启用拖放选项，只需拖放任何列，ag-grid便会按该特定列对所有行进行分组。

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

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

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

Answer 1

我想你错过了grid-column-API documentation

  

管理列行组的方法：    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);
}

Demo