首先,话不多说,直接上效果图。
以上涉及知识点:
(1)列的伸缩:设置列的columnGroupShow属性即可。
在汇总那一列(总分),设置columnGroupShow为closed。在其他伸缩列设置columnGroupShow为open即可。
headerName: '分数', children: [ { headerName: '总分', field: 'total', columnGroupShow: 'closed', //列组分组 }, { headerName: '语文', field: 'chinese', columnGroupShow: 'open', //列组分组 }, { headerName: '数学', columnGroupShow: 'open', //列组分组 field: 'math', }, { headerName: '英语', columnGroupShow: 'open', //列组分组 field: 'english', } ]
(2)默认展开分组:使用groupDefaultExpanded
默认情况下打开组的级别:-1:展开所有组;0:不展开组;1:只展开第一层组别;2:之展开前两层组别,(我的理解是,数字是几就展开前几层组别,暂时没有进行多个组别的测试);
groupDefaultExpanded: 1
(3) 对分组列的设置
例如设置分组别名,设置分组列的宽度,设置分组列的排序,设置列的固定位置,还有是否显示分组列右边的统计个数.
autoGroupColumnDef: { headerName: '分组别名', // 设置分组之后列的显示名称,如果不设置,则默认显示为“Group”。 minWidth: 100, // 设置分组列的最小宽度,其他属性也可以设置,例如:width;maxWidth sort: 'asc', // 对分组进行排序,asc是升序,desc是降序 pinned: 'left', // 将分组列固定在左边 cellRendererParams: { suppressCount: true, // 不显示分组列右边的计数个数 } },
(4) 设置每一层分组行的颜色,比如图中的桃红、白黄色以及浅蓝色。
每一层都有不同的颜色,要实现这样的效果,需要使用ag-grid的css中的属性:
第一层颜色:使用.ag-row-level-0 。
/* 分组第一层行的颜色 */ .ag-row-level-0 { background-color: plum !important; }
第二层颜色:使用.ag-row-level-1 。
/* 分组第二层行的颜色 */ .ag-row-level-1 { background-color: papayawhip !important; }
第三层颜色:使用.ag-row-level-2
/* 分组第三层行的颜色.......以此类推 */ .ag-row-level-2 { background-color: powderblue !important; }
备注: 以我的理解,要显示几层的颜色只需要设置.ag-row-level-XX 即可(本人未进行更深层次颜色的测试)。
以下是上面效果的所有代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ag-grid 列组</title> <script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script> <style> /* 对表格的表头进行渲染 */ .ag-header-cell-label { color: red; } /* 分组第一层行的颜色 */ .ag-row-level-0 { background-color: plum !important; } /* 分组第二层行的颜色 */ .ag-row-level-1 { background-color: papayawhip !important; } /* 分组第三层行的颜色.......以此类推 */ .ag-row-level-2 { background-color: powderblue !important; } </style> </head> <body> <div id="myGrid" style="width: 100%;height: 1000px;" class="ag-theme-alpine"></div> <script> const columnDefs = [ { headerName: '基本信息', children: [ { headerName: '年级', field: 'grade', rowGroup: true, //行组分组 hide: true, //行组分组需要隐藏列 }, { headerName: '班级', field: 'class', rowGroup: true, //行组分组 hide: true, //行组分组需要隐藏列 }, { headerName: '姓名', field: 'name', pined: "left" } ] }, { headerName: '分数', children: [ { headerName: '总分', field: 'total', columnGroupShow: 'closed', //列组分组 }, { headerName: '语文', field: 'chinese', columnGroupShow: 'open', //列组分组 }, { headerName: '数学', columnGroupShow: 'open', //列组分组 field: 'math', }, { headerName: '英语', columnGroupShow: 'open', //列组分组 field: 'english', } ] } ]; const data = [ { grade: "高一", class: '二班', name: '王五', total: '260', chinese: '80', math: '90', english: '90' }, { grade: "高一", class: '二班', name: '张三', total: '200', chinese: '70', math: '100', english: '30' }, { grade: "高一", class: '二班', name: '李四', total: '270', chinese: '89', math: '91', english: '90' }, { grade: "高二", class: '三班', name: '小明', total: '300', chinese: '100', math: '100', english: '100' }, { grade: "高二", class: '三班', name: '小红', total: '265', chinese: '88', math: '90', english: '87' }, { grade: "高二", class: '三班', name: '小华', total: '290', chinese: '100', math: '100', english: '90' } ]; var gridOptions = { defaultColDef: { sortable: true, resizable: true, filter: true, }, debug: true, columnDefs: columnDefs, rowData: data, // 对组别的设置 autoGroupColumnDef: { headerName: '分组别名', // 设置分组之后列的显示名称,如果不设置,则默认显示为“Group”。 minWidth: 100, // 设置分组列的最小宽度,其他属性也可以设置,例如:width;maxWidth sort: 'asc', // 对分组进行排序,asc是升序,desc是降序 pinned: 'left', // 将分组列固定在左边 cellRendererParams: { suppressCount: true, // 不显示分组列右边的计数个数,如果是false,就是要统计个数 } }, // 是否展开分组 groupDefaultExpanded: 2,// 默认情况下打开组的级别:-1:展开所有组;0:不展开组;1:只展开第一层组别;2:之展开前两层组别,(我的理解是,数字是几就展开前几层组别,暂时没有进行多个组别的测试) }; document.addEventListener('DOMContentLoaded', function () { var gridDiv = document.querySelector('#myGrid'); new agGrid.Grid(gridDiv, gridOptions); }); </script> </body> </html>
ag-grid 列组和行组学习
最新推荐文章于 2024-08-09 08:13:24 发布