ag-grid 中的合并标题

Question

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

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

Answer 1

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

是的，更新版本的 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,
    }] 
}];

Answer 2

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

就我而言，标题是动态的。只有一些标题有孩子。

这里是解决方案：

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

2. 将类应用于标题

在你的 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'
   ......
}

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

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

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

'top'和'height'的值需要相应地改变（ag-grid header header height is default is 50px）

Answer 3

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