如何合并 Ag-grid 的单元格？

【问题标题】：How can I merge cells of Ag-grid?如何合并 Ag-grid 的单元格？
【发布时间】：2017-10-08 14:37:20
【问题描述】：

我正在使用 Ag-grid，我需要连续合并特定的单元格。

我该怎么做？

【问题讨论】：

没有什么是 ag-grid 固有的......但是这个 gihub 问题有一些细节/解决方法：github.com/ceolter/ag-grid/issues/22

【解决方案1】：

此示例演示了将“名字”和“姓氏”字段合并为“姓名”字段

columnDefs: [
        {
          headerName: 'Name',
          field: 'name',
          filter: true,
          width: 210,
          valueGetter:function(params){
              return params.data.fname+" "+params.data.lname
          }
        },
...
]

【讨论】：

【解决方案2】：

ag-Grid 将此称为“列跨越”。在过去的 HTML 表格中，我们称之为colspan 和rowspan，用于垂直合并单元格的密切相关的操作。

无论如何，这里是 ag-Grid 参考：

https://www.ag-grid.com/javascript-grid-column-spanning/

【讨论】：

【解决方案3】：

您可以将此添加到特定列的 colDef 中

cellClass: function(params) {
    if(params.data.someConditionForCellsToBeMerged) {
      return params.data.someConditionForCellToKeep ? "top-row-span": "bottom-row-span";
    }   
}

然后在你的 css 中：

.ag-neo .ag-cell.top-row-span {
  border-bottom: 0px;
}

.ag-neo .ag-cell.bottom-row-span {
  border-top: 0px;
  text-indent: -100em; // you can use this to hide the content of the bottom cell
}

【讨论】：