下拉列表中的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);
}

演示