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

Question

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

我怎样才能做到这一点？

Answer 1

此示例演示了合并“名字”和“姓氏”字段以形成“姓名”字段

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

Answer 2

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

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

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

Answer 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
}