下拉选择中的 ag-grid 列行分组

Question

我在我的 angular 7 项目中使用 ag-grid 库来创建网格，它的 <ag-grid-angular [rowGroupPanelShow]="rowGroupPanelShow"></ag-grid-angular> select 中有一个属性或 rowGroupPanelShow as上面提到了。

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

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

我一直在努力解决过去 10 个小时的问题。我也在 ag-grid 官方网站上搜索了很多。但是我的问题没有任何解决方案。

我现在采用的方法可以在随附的图片中看到 post。

Answer 1

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

Methods for management of column row groups: 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

下拉选择中的 ag-grid 列行分组

ag-grid column row grouping on dropdown selection

typescript

ag-grid

angular

angular7