7

您好我正在尝试将我的 PrimeNG 数据表转换为 turbo 表。实际上我已经 [hidden]="!cols.visibility"在 PrimeNG 中使用了我的数据表。现在我应该用什么来在涡轮表中实现相同的目标。

以前的数据表列代码：

<p-column *ngFor="let col of cols"  [hidden]="!col.visibility" [field]="col.field" [header]="col.header"></p-column>

● 文档网址：https ://www.primefaces.org/primeng/#/datatable

新的 Turbo 表列代码：

<ng-template pTemplate="header" let-cols>
      <tr>
          <th style="width: 2.25em"></th>
          <th *ngFor="let col of cols">
              {{col.header}}
          </th>
      </tr>
  </ng-template>

● 文档网址： https ://www.primefaces.org/primeng/#/table

我应该使用什么？我也检查了文档，但没有找到解决方案。

4

4 回答 4

10

我们有类似的要求，我们需要动态隐藏/显示列，但还要保持列的顺序。以下是我们编写代码的方式：

表定义：

<p-table [columns]="columns">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let column of columns" [ngStyle]="{'display': column.display}">
                {{ column.header }}
            </th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let column of columns" [ngStyle]="{'display': column.display}">
                {{ rowData[column.field }}
            </td>
        </tr>
    </ng-template>
</p-table>

列定义：

this.columns = [
    {
        field: 'test'
        header: 'Test Header'
        display: 'table-cell'
    },
    {
        field: 'hiddenTest'
        header: 'Hidden Column'
        display: 'none'
    }
];

这将使您能够迭代列数组并动态地将内联样式从“table-cell”更改为“none”并返回，而无需更改列的原始顺序。

于 2018-02-28T17:18:50.790 回答
1

我使用带有 *ngIf 的 ng-container 来隐藏或显示基于我设置的属性的列： 

<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr>
    <ng-container *ngFor="let col of columns">
      <td *ngIf="!col.hidden">
        {{rowData[col.field]}}
      </td>
    </ng-container>
  </tr>
</ng-template>

标题使用相同的模式。

于 2018-02-13T19:15:50.050 回答
0

现在已在 turbotable 中修复此问题，并且与旧的 DataViewModule 相同

隐藏=“真”

https://github.com/primefaces/primeng/issues/190

于 2019-10-28T11:08:13.507 回答
0

我还在我的一个项目中使用了新的 TurboTable，为了显示/隐藏列，我使用了下一个解决方法：

<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td *ngFor="let col of columns" [class]="!col.showOnMobile ? 'ui-table-hide-on-sm' : ''">
<span>{{rowData[col.field]}}</span>
</td>
</tr>
</ng-template>

其中“ui-table-hide-on-sm”是这样的 CSS 类：

@media (max-width: 767px) {
.ui-table-hide-on-sm{
    display: none !important;
}

}

希望这对你有帮助！

于 2018-02-13T11:43:59.063 回答