ag-grid rowGroup行组可以对行分组,这是非常有用的一个功能,可惜只有企业版才有。
//定义列
var colData = [
{ headerName: '名称', field: 'cl1', 'pinned': 'left',rowGroup:true ,hide:true},
{ headerName: '库存', field: 'cl2' },
{ headerName: '销量', field: 'cl3' },
];
//行数据
var rowData = [
{ cl1: 'itxst.com', cl2: 20101, cl3: 23123 },
{ cl1: 'A', cl2: 20101, cl3: 23123 },
{ cl1: 'A', cl2: 20101, cl3: 23123 },
{ cl1: 'B', cl2: 20101, cl3: 23123 },
{ cl1: 'B', cl2: 20101, cl3: 23123 },
];
//多模拟几行数据出来
for (var i = 1; i < 5; i++) {
rowData.push({ cl1: 'YKK11', cl2: 332 * i, cl3: 562 * i });
}
//将列和数据赋给gridOptions
var gridOptions = {
columnDefs: colData,
rowData: rowData,
onGridReady: function () {
gridOptions.api.sizeColumnsToFit();
},
defaultColDef: {
enableRowGroup: true,
enablePivot: true,
enableValue: true,
sortable: true,
}
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
var eGridDiv = document.querySelector('#itxst');
new agGrid.Grid(eGridDiv, gridOptions);
});