ag-grid 中的合并标题答案

【问题标题】：Merged headers in ag-gridag-grid 中的合并标题
【发布时间】：2019-06-14 11:55:59
【问题描述】：

ag-grid 是否可以使用以下格式：

合并的标题为空白名称
在 2 行中包含名称的合并标题（“原始值”）
父标题居中（“带有子标题的标题”）

【问题讨论】：

标签： ag-grid ag-grid-ng2 ag-grid-angular

【解决方案1】：

只是为了分享。我认为使用 ag-grid 中的标题是不可能的。因此，我将 headerheight 设置为 0，并使用行单元格来实现 header 格式。

【讨论】：

但是我们失去了网格的所有丰富特性。有解决方案的人吗？这也是他们在这里忽略的一个好问题：github.com/ag-grid/ag-grid/issues/2491

【解决方案2】：

谢谢你的问题，我知道现在回答已经太晚了，只是为了帮助其他人知道。

是的，可以使用更新版本的 ag-grid，请查看。

`var columnDefs = [ {
headerName: 'Athlete Details',
children: [
  {
    headerName: 'Athlete',
    field: 'athlete',
    width: 150,
    suppressSizeToFit: true,
    enableRowGroup: true,
    rowGroupIndex: 0,
  },
  {
    headerName: 'Age',
    field: 'age',
    width: 90,
    minwidth: 75,
    maxWidth: 100,
    enableRowGroup: true,
  }
]

}];

https://plnkr.co/edit/?p=preview&preview

【讨论】：

【解决方案3】：

我为此苦苦挣扎了很长一段时间，但我找不到一个好的解决方案。无论如何，我想出了一个解决方案（至少对我自己而言）。

在我的例子中，标题是动态的。只有部分标头有子标头。

解决办法如下：

计算出标题应该有多少行跨度

将类应用于标题

在您的 columnDefs 中，使用“headerClass”

const rowSpanClass = .....  // This is calculated base on the data you have or set it static
columnDefs = { 
   ....
   ....
   headerClass: rowSpanClass, // In my case, if it is 2 rowspan, i call it 'header-row-span-2'
   ......
}

在自定义标题类上应用样式

.header-row-span-2 { 位置：固定；顶部：50px；高度：100px； }

.header-row-span-3 { 位置：固定；顶部：100 像素；
高度：150px； }

'top'和'height'的值需要做相应的改变（ag-grid header的高度默认为50px）

【讨论】：