angular - PrimeNG 树表级别样式

Question

我已经TreeTable从PrimeNG实施。

要求是在级别之间添加虚线以用于可用性透视。

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

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

我无法找出适当的解决方案来实施它。

可以用 实现PrimeNG TreeTable吗？

Answer 1

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

下面的示例是从我自己的代码中截取的，使用Angular 8and 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)方法内部，您只需检查 param 的值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 标签的一些样式。

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