Question

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

我该怎么做？

Answer 1

ag-Grid将此称为“列跨越”。在HTML表格的旧日子里，我们将此colspan和rowspan称为与垂直合并单元格密切相关的操作。

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

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

Answer 2

您可以将此添加到特定列的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
}

Answer 3

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

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

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

3 个答案: