PrimeNG 树表级别样式答案

【问题标题】：PrimeNG TreeTable Level StylingPrimeNG 树表级别样式
【发布时间】：2018-03-07 12:11:38
【问题描述】：

我已经从PrimeNG 实现了TreeTable。

要求是在可用性视角之间添加虚线。

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

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

我无法找到合适的解决方案来实现它。

可以用PrimeNGTreeTable实现吗？

【问题讨论】：

你找到解决办法了吗？

标签： angular typescript primeng primeng-treetable

【解决方案1】：

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

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

这是一个动态的TreeTable，仅在有数据要显示时才显示，并且我检查了标题和数据，用于列调整和我使用getOrderStyle() 应用的颜色样式。 getTable() 在这里用于返回标题和字段的名称（这是一件很酷的事情）。

引用曼达洛人的话，就是这样：

<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 行是显示/隐藏节点。在getOrderStyle(array) 方法中，您只需检查参数array 的值即可决定将哪个类应用于每个（整个）表行。

  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 标签的一些样式。

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

【讨论】：