我正在使用 PrimeNG angular 的涡轮表，我想对列的宽度、长度和厚度进行排序。我申请遵循代码示例，但它不起作用我不知道为什么，这是我的代码：
<p-table [value]="section" sortField="Thickness" sortMode="single" *ngFor="let section of sections">
<ng-template pTemplate="header">
<tr>
<th>Quantity</th>
<th>Length</th>
<th>Width</th>
<th [pSortableColumn]="Thickness">Thickness</th>
<th>T</th>
<th>B</th>
<th>L</th>
<th>R</th>
<th>EAR</th>
<th>D/S</th>
<th>m^2</th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData>
<tr>
<th colspan="4">
<div (click)="EditSection(rowData.IsCustom, rowData)" class="text-left">{{rowData.SectionName +" "+ rowData.Description.Description + " " + (rowData.Extras
!= undefined ? rowData.Extras.join(" ") : "") + " " + rowData.Colour + " " +
rowData.Finish.Description + " - $" + rowData.Rate +" / sqm" }}
</div>
</th>
<th colspan="8" *ngIf="!rowData.IsCustom">
<div class="md-inputfield">
<p-autoComplete field="text" name="acPiece" delay="1000" (onSelect)="selectedPieces($event, rowData.SectionName)" [suggestions]="acPieces"
(completeMethod)="autoCompletePiece($event, rowData.SectionName)"></p-autoComplete>
</div>
</th>
</tr>
<tr *ngFor="let piece of rowData.Pieces; let i = index">
<td>
<p-spinner [name]="rowData.SectionName+'_spQuantity_'+i" #spQuantity="ngModel" [(ngModel)]="piece.Quantity"></p-spinner>
</td>
<td pEditableColumn>
<p-cellEditor *ngIf="!rowData.IsCustom">
<ng-template pTemplate="input">
<input type="text" [name]="rowData.SectionName+'_length_'+i" [(ngModel)]="piece.Length">
</ng-template>
<ng-template pTemplate="output">
{{piece.Length}}
</ng-template>
</p-cellEditor>
</td>
<td pEditableColumn>
<p-cellEditor *ngIf="!rowData.IsCustom">
<ng-template pTemplate="input">
<input type="text" [name]="rowData.SectionName+'_width_'+i" [(ngModel)]="piece.Width">
</ng-template>
<ng-template pTemplate="output">
{{piece.Width}}
</ng-template>
</p-cellEditor>
</td>
<td pEditableColumn>
<p-cellEditor *ngIf="(!rowData.IsCustom)">
<ng-template pTemplate="input">
<input type="text" [name]="rowData.SectionName+'_thickness_'+i" [(ngModel)]="piece.Thickness">
</ng-template>
<ng-template pTemplate="output">
{{piece.Thickness}}
</ng-template>
</p-cellEditor>
</td>
<td>
<p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Top'+i" binary="true" [(ngModel)]="piece.Top"></p-checkbox>
</td>
<td>
<p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Bottom'+i" binary="true" [(ngModel)]="piece.Bottom"></p-checkbox>
</td>
<td>
<p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Left'+i" binary="true" [(ngModel)]="piece.Left"></p-checkbox>
</td>
<td>
<p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Right'+i" binary="true" [(ngModel)]="piece.Right"></p-checkbox>
</td>
<td>
<p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_EAR'+i" binary="true" [(ngModel)]="piece.EAR"></p-checkbox>
</td>
<td>
<p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_DoubleSide'+i" binary="true" [(ngModel)]="piece.DoubleSide"></p-checkbox>
</td>
<td *ngIf="(!rowData.IsCustom)">
{{calculateTotalArea(piece)}}
</td>
<td *ngIf="(!rowData.IsCustom)">
<button pButton type="button" icon="fa-close" (click)="removePieceItem(i, rowData.SectionName)"></button>
</td>
</tr>
</ng-template>
</p-table>
我向涡轮表添加了两个属性：sortField="Thickness" sortMode="single"但它不起作用，有人帮我解决这个问题，谢谢http://plnkr.co/edit/vEsGORleWpf3YKBGwYDx?p=preview
这是一个厚度列排序的示例。
因为我不知道您是否可以根据文档只对特定字段进行排序，所以我创建了一个自定义click事件：
<th (click)="sortByThickness(sectionIndex)">Thickness</th>
这是排序逻辑：
sortByThickness(sectionIndex) {
const thisRef = this;
this.sections[sectionIndex][0].Pieces.sort(function(a, b){
return (a.Thickness - b.Thickness)*thisRef.descThicknessOrder;
});
// save order choice
this.descThicknessOrder *= -1;
}
这是一个工作的Plunker
那是你需要的吗？你有任何问题吗 ？
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句