Angular Grid无分组内容时如何禁用分组展开并合并行？

针对你遇到的Music分组展开后仅显示空分支的问题，可以通过以下步骤实现需求：

核心实现思路 #

1. 禁用无内容分组的展开功能：通过isRowExpandable回调判断分组节点是否存在子项，无内容时隐藏展开箭头。
2. 自定义分组列显示内容：利用autoGroupColumnDef的自定义渲染器，在无内容时直接合并显示分组名与Performance值。

修改后的完整代码 #

import { Component } from '@angular/core';
import { ColDef, RowNode } from 'ag-grid-community';

@Component({
  selector: 'my-app',
  template: 
  `<ag-grid-angular
    style="height: 100%;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [animateRows]="true"
    [rowData]="rowData"
    [isRowExpandable]="isRowExpandable"
    [autoGroupColumnDef]="autoGroupColumnDef"
    (gridReady)="onGridReady($event)">
  </ag-grid-angular>`,
})
export class AppComponent {

  public columnDefs: ColDef[] = [
    { field: 'school', rowGroup: true, hide: true },
    { field: 'subject', rowGroup: true, hide: true },
    { field: 'branch' },
    { field: 'perfomance', aggFunc: 'avg' }
  ];

  // 自定义分组列配置
  public autoGroupColumnDef: ColDef = {
    cellRendererParams: {
      innerRenderer: (params: any) => {
        // 判断当前分组是否无有效子节点
        if (!params.node.childrenAfterFilter || params.node.childrenAfterFilter.length === 0) {
          // 获取叶子节点的performance值
          const performance = params.node.allLeafChildren[0].data.perfomance;
          return `${params.value} - Performance: ${performance}`;
        }
        // 有子节点的分组正常显示名称
        return params.value;
      }
    }
  };

  // 控制分组是否可展开
  public isRowExpandable = (node: RowNode) => {
    // 仅当节点有过滤后的子节点时允许展开
    return node.childrenAfterFilter && node.childrenAfterFilter.length > 0;
  };

  public rowData: any[];

  onGridReady(params) {
    this.rowData = [
          {
            school: 'SomeSchool',
            subject: 'Music',
            branch: undefined,
            perfomance: 4
          },
          {
            school: 'SomeSchool',
            subject: 'Math',
            branch: 'Algebra',
            perfomance: 5
          },
          {
            school: 'SomeSchool',
            subject: 'Math',
            branch: 'Geometry',
            perfomance: 4.5
          }
        ];
  }
}

代码说明 #

• isRowExpandable：该函数检查分组节点是否存在过滤后的子节点，无内容时返回false，AG Grid会自动隐藏展开箭头，禁用展开功能。
• autoGroupColumnDef：通过innerRenderer自定义分组单元格的显示内容，当分组无有效子节点时，直接拼接分组名（如Music）与对应的Performance值，实现合并一行显示的效果。
• 原有列定义与行数据无需大幅修改，仅需添加上述两个配置项即可实现需求。

内容的提问来源于stack exchange，提问作者Islam Khabibullin