PrimeNG 树表层级样式

Question

我已经从 PrimeNG 实现了 TreeTable。

要求是在级别之间添加虚线以提高可用性。

我尝试了多种方法，但因为它正在生成 HTML 结构

<table>
  <div>
    <td></td>
  </div>
<table>

我想不出合适的解决方案来实现它。

是否可以用PrimeNG TreeTable实现？

Answer 1

我有类似的问题。由于我没有从 Google 中挖掘任何东西，所以我设法以某种方式解决了它（非常简单！）。我知道这个问题已经问了很长时间了，但像我一样，其他人也可能会来到这里。虽然这不是一个直接的答案，但它可以帮助您找到实现目标的其他方法（通过使用样式）。

下面的示例是从我自己的代码中截取的，使用了 Angular 8 和 PrimeNG 9。

它是一个动态 TreeTable 仅在有数据要显示时显示，并且我在其中检查了 header 和数据，以进行列调整和我正在应用的颜色样式与 getOrderStyle()。 getTable() 在这里用于 return header 和字段的名称（这很酷）。

引用《曼达洛人》，就是这样：

<p-treeTable *ngIf="!isLoading && dataNode.length" [value]="dataNode" [columns]="getTable()">

  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [ngStyle]="checkHeader(col.header)">
         {{ col.header }}
      </th>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
     <tr>
       <td *ngFor="let col of columns; let i = index" [ngClass]="getOrderStyle(rowData)" [ngStyle]="checkField(rowData[col.field])">
         <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
         {{ rowData[col.field] }}
       </td>
     </tr>
   </ng-template>

</p-treeTable>

p-treeTableToggler 行指向 show/hide 节点。在 getOrderStyle(array) 方法中，您只需检查参数 array 的值来决定将哪个 class 应用于每个（整个）table 行。

  getOrderStyle(array) {
    const col = 'column-name'; // the name of a field column you got from your getTable()
    if (array[col] === 'B') {
      return 'order-buy';
    } else if (array[col] === 'S') {
      return 'order-sell';
    }
  }

好的，好的。这是 getTable():

的示例

  getTable() {
    return [
      { field: 'code', header: '' },
      { field: 'qtty', header: '' },
      { field: 'price', header: '️' },
      { field: 'total', header: '' },
      { field: 'time', header: '' }
    ];
  }

让我们用我在这里使用的 CSS 来完成这个示例：

.order-buy {
  color: darkgreen;
  background-color: rgba(200, 255, 200, .8) !important;
}

.order-sell {
  color: darkred;
  background-color: rgba(255, 200, 200, .8) !important;
}

当然，我只使用 !important，因为 background-color 没有它就无法工作。您需要强行进入的 PrimeNG 标签的一些样式。

祝你好运（下一个找到它的人）！

PrimeNG 树表层级样式

PrimeNG TreeTable Level Styling

typescript

primeng

angular

primeng-treetable