AG-Grid：基于子集的列分组

Posted 2023-03-28

【中文标题】AG-Grid：基于子集的列分组

【英文标题】：AG-Grid: Column Grouping based on children set

【发布时间】：2020-09-10 21:53:11

【问题描述】：

我有一个类似于这个结构的 ag-grid columnDef。

gridOptions.columnDefs = [
    
        headerName: 'Athlete Details',
        children: [
             headerName: 'Name', field: 'name' ,
             headerName: 'Age', field: 'age' ,
             headerName: 'Country', field: 'country' 
        ]
    ,
    
        headerName: 'Sports Results',
        children: [
             headerName: 'Sport', field: 'sport' ,
             headerName: 'Total', columnGroupShow: 'closed' ,
             headerName: 'Gold', columnGroupShow: 'open' ,
             headerName: 'Silver', columnGroupShow: 'open' ,
             headerName: 'Bronze', columnGroupShow: 'open' 
        ]
    
];

使用这种数据集，是否可以使用运动员的姓名对两组数据进行分组？

我想创建一个仅显示运动员姓名和奖牌总数的组，并且网格上的名称项是可展开/可折叠的，看起来像这样。

【参考方案1】：

当您将列分隔为列组时，这只是一种显示数据的方式，但在幕后，这些数据并不是不相交的，而是一大块数组。因此，您可以按任意一行对任意数量的列组进行分组。在本例中为“运动员”。

要获得您想要的结果，需要对 gridOptions 和 colDefs 进行一些调整。我会用cmets inline贴出相关代码。

在模板中 -

  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [autoGroupColumnDef]="autoGroupColumnDef" // to customize your grouped column
  [suppressAggFuncInHeader]="true" // to suppress column headers with aggregate function prefix like sum(Gold)

在组件中 -

 constructor(private http: HttpClient) 
     this.columnDefs = [
      
        headerName: 'Athlete Details',
        children: [
          
            headerName: 'Athlete',
            field: 'athlete',
            width: 180,
            filter: 'agTextColumnFilter',
            rowGroup: true, // this to group by athlete
            hide: true // hide this column as you will display grouped column
          ,
          
            headerName: 'Age',
            field: 'age',
            width: 90,
            filter: 'agNumberColumnFilter',
          ,
          
            headerName: 'Country',
            field: 'country',
            width: 140,
          ,
        ],
      ,
      
        headerName: 'Sports Results',
        children: [
          
            headerName: 'Sport',
            field: 'sport',
            width: 140,
          ,

          
            headerName: 'Gold',
            field: 'gold',
            width: 100,
            filter: 'agNumberColumnFilter',
             aggFunc: 'sum' // to show subtotals at group level for this column
          ,
          
            headerName: 'Silver',
            field: 'silver',
            width: 100,
            filter: 'agNumberColumnFilter',
             aggFunc: 'sum'
          ,
          
            headerName: 'Bronze',
            field: 'bronze',
            width: 100,
            filter: 'agNumberColumnFilter',
             aggFunc: 'sum'
          ,
          
            headerName: 'Total',
            field: 'total',
            width: 100,
            filter: 'agNumberColumnFilter',
             aggFunc: 'sum'
          ,
        ],
      ,
    ];
    this.defaultColDef = 
      flex: 1,
      minWidth: 100,
      filter: true,
      sortable: true,
      resizable: true,
    ;
    this.autoGroupColumnDef = 
      headerName: 'Athlete', // naming your grouped column
      minWidth: 200,
      

这是它的外观