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

【问题标题】：AG-Grid: Column Grouping based on children setAG-Grid：基于子集的列分组
【发布时间】：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' }
        ]
    }
];

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

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

【问题讨论】：

标签： javascript ag-grid jsgrid ag-grid-validation

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

这是它的外观

【讨论】：