您好我正在尝试将我的PrimeNG数据表转换为turbo表。实际上我在PrimeNG数据表中使用了[hidden]="!cols.visibility"
。现在我应该用什么来实现涡轮增压表中的相同功能。
以前的数据表列代码:
<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
我应该使用什么?我也检查了文档,但没有找到解决方案。
答案 0 :(得分:4)
我们有类似的要求,我们需要动态隐藏/显示列,但也要维护列的顺序。以下是我们编写代码的方式:
表格定义:
<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'
}
];
这将使您能够迭代列数组并动态更改&#39; table-cell&#39;的内联样式。没有&#39;然后返回而不改变列的原始顺序。
答案 1 :(得分: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>
标题上使用相同的模式。
答案 2 :(得分: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;
}
}
希望这能帮到你!
答案 3 :(得分:0)
此问题现已在Turbotable中修复,与旧的DataViewModule相同
hidden =“ true”