web-dev-qa-db-ja.com

PrimeNg <p-table>ソート

私は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>は使用できません。

angularprimengprimeng-datatable
5
Anna

このようにsortMode="multiple"を使用してソートするには、マルチモードを有効にする必要があります-

<p-table [columns]="cols" [value]="documents" sortMode="multiple">

デフォルトのソートは単一の列で実行されます。複数フィールドのソートを有効にするには、sortModeプロパティを "multiple"に設定し、別の列をクリックするときにメタキーを使用します。

詳細については、ドキュメントを参照してください-

0
Pardeep Jain