我正在使用PrimeNG角度的涡轮增压表,我想对列宽,长度和厚度进行排序。我申请遵循代码示例,但它不起作用我不知道为什么,这是我的代码:
<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>
我在turbo表中添加了两个属性:sortField="Thickness" sortMode="single"
但它不起作用,任何人都帮我解决这个问题,谢谢
http://plnkr.co/edit/vEsGORleWpf3YKBGwYDx?p=preview
答案 0 :(得分:2)
以下是厚度列排序的示例。
因为我不知道您是否可以根据文档对特定字段进行排序,所以我创建了一个自定义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
这就是你需要的吗?你有什么问题吗?