ag-grid多表头合并列

ag-grid多表头合并列,效果图如下。

ag-grid两层表头代码例子

注意：如果需要固定合并后的列，需要在其所有子列设置pinned才有效，如下面的姓名和性别列。

//定义多表头的列
var columnDefs = [
      { headerName: '分组A' ,
            children: [
             { headerName: '姓名', field: 'name','pinned': 'left'},
             { headerName: '性别', field: 'sex' ,'pinned': 'left'}
            ]
        },
         { headerName: '分组B',
            children: [
              { headerName: '年龄', field: 'age' },
              { headerName: '籍贯', field: 'jg' },
              { headerName: '省份', field: 'sf' },
              { headerName: '地址', field: 'dz' }
            ]
        }
];

在线试一试

ag-grid三层表头代码例子

注意：当表头顶层只有一列时设置固定列（pinned: 'left'）无效

//定义多表头的列
var columnDefs = [
    {
        headerName: '最顶层分组'
        , children: [
            {
                headerName: '分组A',
                children: [
                    { headerName: '姓名', field: 'name' },
                    { headerName: '性别', field: 'sex' }
                ]
            },
            {
                headerName: '分组B',
                children: [
                    { headerName: '年龄', field: 'age' },
                    { headerName: '籍贯', field: 'jg' },
                    { headerName: '省份', field: 'sf' },
                    { headerName: '地址', field: 'dz' }
                ]
            }]
    }
];

在线试一试

最后补充以下，如果需要列表头需要文字居中，可以通过样式来居中。

.ag-header-cell-label { justify-content: center; }