制表器：如何添加合并制表器上多列的新行

Question

有什么方法可以添加新行来合并制表器上的多个列？

像这样，数据需要跨越多个列。

其他详细信息是通过 ajax 调用或其他一些函数添加的，我需要添加新行，其中某些单元格跨越多列。单元格不仅包含价格或类似的内容，还可能包含其他内容。所以不需要计算。

有什么办法可以解决这个问题吗？也许通过添加页脚或其他东西来实现这一点。

我正在使用打字稿，因此如果在打字稿上提供解决方案将会非常有帮助。

非常感谢。

Answer 1

一种方法是使用 rowFormatter 选项。下面是一个例子。

PS。这可能会产生一些副作用。请注意，需要对合并的列禁用列调整大小，否则无法正确调整大小。

const tableData = [
  { id: 1, name: 'Billy Bob', age: '23', gender: 'male', height: 1, col: 'red', dob: '25/03/2000' },
  { id: 2, name: 'Mary May', age: '41', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982' },
  { id: 3, name: 'Margret Marmajuke', age: '30', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1993' }
]

const table = new Tabulator('#table', {
  layout: 'fitColumns',
  data: tableData,
  columns: [
    { title: 'Name', field: 'name', width: 175, resizable: false },
    { title: 'Age', field: 'age', width: 100, resizable: false },
    { title: 'Gender', field: 'gender', width: 100, resizable: false },
    { title: 'Favourite Color', field: 'col', width: 150 },
    { title: 'Date Of Birth', field: 'dob' }
  ],
  rowFormatter: function (row) {
    const data = row.getData()

    if (data.col === 'blue') {
      const nodes = row.getElement().childNodes
      const [c1, c2, c3, ...remains] = nodes
      const merged = document.createElement('div')
      const mergedWidth =
        parseInt(c1.style.width, 10) + parseInt(c2.style.width, 10) + parseInt(c3.style.width, 10) + 'px'

      merged.style.width = mergedWidth
      merged.className = 'tabulator-cell'
      merged.innerHTML = 'Merged "' + data.name + ' + ' + data.age + ' + ' + data.gender + '"'

      row.getElement().replaceChildren(merged, ...remains)
    }
  }
})

<html>
<head>
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
  <script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>
<body>
  <div id="table"></div>
</body>
</html>

制表器：如何添加合并制表器上多列的新行

问题描述投票：0回答：1

1个回答

最新问题

制表器：如何添加合并制表器上多列的新行

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1