ag-grid(Angular)：如何实现单个列表头跨两列且不新增表头行？

需求 #

我用AG Grid Angular做表格，要实现单个表头跨两列的效果，期望样式：

|    spans col 1 and 2    |   <- header row
| row 1 col1 | row 1 col2 |   <- data row 1
| row 2 col1 | row 2 col2 |   <- data row 2

试过列组（column groups），但会多一行子列头，不是我要的：

|   group spans col 1 and 2   |   <- group header row
| col 1 header | col 2 header |   <- column header row (don't want this)
|  row 1 col1  |  row 1 col2  |   <- data row 1
|  row 2 col1  |  row 2 col2  |   <- data row 2

补充需求 #

1. 实现后能不能保留表头的排序、筛选功能？
2. 优化要求：未跨列的列（比如col3）保留标准表头行为，可正常排序/筛选；同时给col1和col2的组合加自定义排序函数，期望样式：

|   group spans col 1 and 2   | col 3 group  |  <- group header row
| col 1 header | col 2 header | col 3 header |  <- column header row (hidden with [headerHeight]="0")
|  row 1 col1  |  row 1 col2  |  row 1 col3  | <- data row 1
|  row 2 col1  |  row 2 col2  |  row 2 col3  | <- data row 2

实现方案 #

核心思路 #

用列组定义跨列表头，把包含子列头的行高度设为0，同时保留子列的功能绑定，再给跨列组加自定义排序逻辑。

具体操作 #

1. 定义列组结构
   把col1、col2放到同一个列组下，col3单独设置。给col1、col2加hideHeader: true隐藏子列头文字：

   this.columnDefs = [
     {
       headerName: 'spans col 1 and 2',
       children: [
         { field: 'col1', sortable: true, filter: true, hideHeader: true },
         { field: 'col2', sortable: true, filter: true, hideHeader: true }
       ]
     },
     {
       headerName: 'col 3 group',
       children: [
         { field: 'col3', sortable: true, filter: true }
       ]
     }
   ];
   

2. 隐藏子列头行
   在AG Grid组件上设置[headerHeight]="0"，让子列头行高度为0，视觉上只显示组头行，同时自定义组头行高度：

   <ag-grid-angular
     [columnDefs]="columnDefs"
     [rowData]="rowData"
     [headerHeight]="0"
     [groupHeaderHeight]="50"
   ></ag-grid-angular>
   

3. 保留标准列的排序/筛选
   只要给col3的列定义开启sortable: true和filter: true，就能正常用排序、筛选功能。因为子列头行高度为0，点击col3的组头区域就会触发子列的对应功能。

4. 添加跨列组的自定义排序
   给跨列组开启sortable: true，并添加comparator函数实现col1+col2的组合排序，同时把col1、col2的sortable设为false避免冲突：

   this.columnDefs = [
     {
       headerName: 'spans col 1 and 2',
       sortable: true,
       comparator: (valueA, valueB, nodeA, nodeB) => {
         // 先按col1排序，col1相同再按col2排序
         if (nodeA.data.col1 !== nodeB.data.col1) {
           return nodeA.data.col1.localeCompare(nodeB.data.col1);
         }
         return nodeA.data.col2.localeCompare(nodeB.data.col2);
       },
       children: [
         { field: 'col1', sortable: false, filter: true, hideHeader: true },
         { field: 'col2', sortable: false, filter: true, hideHeader: true }
       ]
     },
     {
       headerName: 'col 3 group',
       children: [
         { field: 'col3', sortable: true, filter: true }
       ]
     }
   ];
   

功能验证 #

• 筛选：col1、col2、col3都能正常筛选，点击组头的筛选图标（开启的话）会触发对应子列的筛选。
• 排序：col3点击组头按默认逻辑排序；跨列组点击组头按自定义的col1+col2组合逻辑排序。

内容的提问来源于stack exchange，提问作者Jobu