ag-grid rowGroup行组

ag-grid rowGroup行组可以对行分组，这是非常有用的一个功能，可惜只有企业版才有。

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);
});

在线试一试