AG-Grid的嵌套列与分组列的区别以及如何实现
AG-Grid 中的 nested columns（嵌套列）和 grouped columns（分组列）都可以用来在表格中创建层级结构。不同的是，嵌套列是基于列的属性来创建的，而分组列则是基于单元格的数据值来创建的。
- 嵌套列的创建：
// 定义列的顺序和宽度 var columnDefs = [ {headerName: "Athlete Details", children: [ {headerName: "Athlete", field: "athlete", width: 150}, {headerName: "Age", field: "age", width: 90}, {headerName: "Country", field: "country", width: 120} ] }, {headerName: "Sports Results", children: [ {headerName: "Sport", field: "sport", width: 150}, {headerName: "Year", field: "year", width: 90}, {headerName: "Gold", field: "gold", width: 100}, {headerName: "Silver", field: "silver", width: 100}, {headerName: "Bronze", field: "bronze", width: 100}, {headerName: "Total", field: "total", width: 100} ] } ];
// 创建 AG-Grid var gridOptions = { columnDefs: columnDefs, rowData: rowData, groupUseEntireRow: true }; new agGrid.Grid(gridDiv, gridOptions);
- 分组列的创建：
// 定义 columnDefs，将 sport 列作为第一级分组列 var columnDefs = [ {headerName: "Sport", field: "sport", rowGroup: true, hide: true}, {headerName: "Year", field: "year"}, {headerName: "Athlete", field: "athlete"}, {headerName: "Gold", field: "gold", aggFunc: 'sum'}, {headerName: "Silver", field: "silver", agg