下拉选择上的 ag-grid 列行分组答案

【问题标题】：ag-grid column row grouping on dropdown selection下拉选择上的 ag-grid 列行分组
【发布时间】：2019-07-26 21:12:52
【问题描述】：

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

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

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

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

我现在采用的方法可以在这篇文章所附的图片中看到。

【问题讨论】：

代码截图太烦人了。将它们替换为您的代码的文本版本。此外，如果您制作一个演示问题的演示，您将更有可能得到答案。您可以从this 或documentation 中的任何其他示例开始。
我也看过你之前的问题。始终在您的问题中提供您的代码作为文本！如果您认为需要清晰起见，您可以也添加屏幕截图。

标签： angular typescript angular7 ag-grid

【解决方案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

【讨论】：