如何将 PrimeNg Tree table 中的列组与不可滚动的列组合？

Question

我正在使用 primeng 7.1.3。

我要创建的是 scrollable tree table（水平和垂直）：

第一名column not scrollable
2 groups of column 不包括第一个

我设法得到了这样的东西：StackBlitz code。

编辑开始 ------------------------------ ------------------

我找到了解决方法，因此我更新了 Stackblitz link 以更正该问题。 如果您想查看原始问题，请在 app-component.ts 文件中注释 ngAfterViewInit()。由于上述解决方案，还更新了问题的标签。

编辑结束 ------------------------------ ----------------------

据我了解，它将 2 个组放在第一列上方 - 而不是保留 empty cell the size of 2 rows - 其他列。

树表的文档：PrimeNg Tree Table documentation

关于如何解决这个问题的任何提示？

谢谢。

Answer 1

所以我想出了一个解决方案，但它不是很干净。

我没有深入研究 PrimeNg 框架并修改其代码，而是决定使用 ngAfterViewInit 和 对生成的 DOM 进行工作。从这里开始，我只是寻找不应该出现在这里的单元格并将它们删除。我还更新了空单元格的高度。

下面是ngAfterViewInit()中使用的函数：

correctDOM(): void {
  function cleanFixedHeader(tagName: string, element: Element): Element {
    const listElementsByTagName = element.getElementsByTagName(tagName);

    if (listElementsByTagName.length === 0) {
      return null;
    }

    for (let i = 0; i < listElementsByTagName.length - 1; i++) {
      element.removeChild(listElementsByTagName[i]);
    }
    return listElementsByTagName[listElementsByTagName.length - 1];
  }

  const treeTableFixedHead: Element = this.elRef.nativeElement
                                  .getElementsByClassName('ui-treetable-frozen-view')[0]
                                  .getElementsByClassName('ui-treetable-thead')[0];

  const treeTableFixedRow = cleanFixedHeader('TR', treeTableFixedHead);
  if (treeTableFixedRow !== null) {
    const treeTableFixedHeaderCell = cleanFixedHeader('TH', treeTableFixedRow);
    treeTableFixedHeaderCell.setAttribute('height', String(treeTableFixedHeaderCell.getBoundingClientRect().height * 2));
  }
}

Stackblitz link，同题。我将编辑所述问题以指示如何查看原始问题。

希望它能对某人有所帮助，因为关于 PrimeNg 的问题似乎并不多。尽管如此，请记住，这个解决方案确实不是一个干净的解决方案。但是它节省了我很多时间所以...

如何将 PrimeNg Tree table 中的列组与不可滚动的列组合？

How to combine column groups in PrimeNg Tree table with unscrollable column?

javascript

dom

angular

primeng-treetable