当您将列分成列组时,这只是一种显示数据的方式,但在幕后,该数据不是不相交的,而是一大块数组。因此,您可以按任意一行对任意数量的列组进行分组。在这种情况下,“运动员”。
要获得您想要的结果,需要对 gridOptions 和 colDefs 进行一些调整。我将发布相关代码并内联注释。
在模板中 -
[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,}
}
这是它的外观