ag Grid：如何在将不可分组的列拖动到行组面板后禁用隐藏它们？答案

【问题标题】：agGrid: how to disable hiding ungroupable columns after dragging them to the row group panel?ag Grid：如何在将不可分组的列拖动到行组面板后禁用隐藏它们？
【发布时间】：2021-01-08 19:05:58
【问题描述】：

我有一个 Angular 应用程序，我正在向其中添加一个 agGrid 表。我将表格配置为允许按如下方式对行进行分组：

  <ag-grid-angular
    [columnDefs]="columnDefs"
    [rowData]="activeMethods"
    [groupDefaultExpanded]="-1"
    [rowGroupPanelShow]="'always'"
  >
  </ag-grid-angular>

我将一些列设置为可分组如下：

    enableRowGroup: true,
    enablePivot: true,

这显示了行组面板并允许对我拖入其中的列进行分组，但问题是我拖入面板的“不可分组”列被隐藏了。我需要在拖到那里时不要隐藏这些列。我知道suppressDragLeaveHidesColumns 参数在将任何列拖离表格时会禁用隐藏，但我希望“可分组”列在拖到组面板时仍然隐藏。我想要实现的目标容易实现吗？

【问题讨论】：

标签： ag-grid ag-grid-angular

【解决方案1】：

您可以保留suppressDragLeaveHidesColumns 以防止在将非分组列拖到网格外时隐藏，然后利用网格事件columnRowGroupChanged 将正在分组的列更改为隐藏。你可以找到documentation for this here。

在版本 24 中，这可以使用 Column API 方法applyColumnState 轻松实现，this can be found here 上的文档

把这一切放在一起：

  onColumnRowGroupChanged(params) {
    let columnStateParams = [];

    params.columns.forEach(col => {
      columnStateParams.push({ colId: col.getColId(), hide: true });
    });

    params.columnApi.applyColumnState({
      state: columnStateParams,
    });
  }

我创建了一个Plunker showing this

年份和国家列只能分组，运动员和年龄列不能分组。

【讨论】：

很好的答案！谢谢