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

Question

我有一个类似于此结构的 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' }
        ]
    }
];

对于这样的数据集，是否可以用运动员的名字对两组数据进行分组？

我想创建一个只显示运动员姓名和奖牌总数的组，网格上的名称项是 expandable/collapsible，看起来像这样。

Answer 1

当您将列分成列组时，这只是一种显示数据的方式，但在幕后，该数据不是不相交的，而是一个数组块。因此，您可以按任意一行对任意数量的列组进行分组。在这种情况下 'Athlete'.

为了达到您想要的结果，需要对 gridOptions 和 colDefs 进行一些调整。我将 post 内联注释的相关代码。

在模板中 -

  [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,}
      }

这是它的样子

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

AG-Grid: Column Grouping based on children set

javascript

ag-grid

jsgrid

ag-grid-validation