私はprimeNg <p-table>
を使用しています。データのソートを実装したい。私がしたことは以下です
sort.HTML
<p-table [columns]="cols" [value]="documents">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-doc>
<tr>
<td>
{{doc.sName}}
</td>
<td>
{{doc.sYear}}
</td>
<td>
{{doc.sAge}}
</td>
<td>
{{doc.sColor}}
</td>
</tr>
</ng-template>
</p-table>
sort.ts
this.cols = [
{ field: 'name', header: 'Name' },
{ field: 'year', header: 'Year' },
{ field: 'age', header: 'Age' },
{ field: 'color', header: 'Color' }
];
ngOnInit(){
//made a service call and got data for
this.documents=[{
"sName":"Jhon",
"sYear":"1994",
"sAge":"20",
"sColor":"Red"
},
{
"sName":"Sam",
"sYear":"1996",
"sAge":"25",
"sColor":"Red"
},
{
"sName":"Anna",
"sYear":"1991",
"sAge":"21",
"sColor":"Green"
},
{
"sName":"Jhon",
"sYear":"1999",
"sAge":"25",
"sColor":"Blue"
},
{
"sName":"Betty",
"sYear":"1993",
"sAge":"35",
"sColor":"Red"
}]
}
現在、Name
フィールドのみがソートされていますが、他の列にもソートを実装するにはどうすればよいですか? [pSortableColumn]
を使用しましたが、列が並べ替えられていません。私が間違っているところを案内してくれませんか?
PS:<p-dataTable>
は使用できません。
このようにsortMode="multiple"
を使用してソートするには、マルチモードを有効にする必要があります-
<p-table [columns]="cols" [value]="documents" sortMode="multiple">
デフォルトのソートは単一の列で実行されます。複数フィールドのソートを有効にするには、sortModeプロパティを "multiple"に設定し、別の列をクリックするときにメタキーを使用します。
詳細については、ドキュメントを参照してください-