web-dev-qa-db-fra.com

Premier <g-table> tri

J'utilise primeNg <p-table>. Je souhaite implémenter le tri des données. Ce que j'ai fait est ci-dessous

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"
}]
}

Pour l'instant, seul le champ Name est trié, comment puis-je également implémenter le tri dans d'autres colonnes? J'ai utilisé [pSortableColumn] mais les colonnes ne sont pas triées, je manque quelque part. Pouvez-vous s'il vous plaît me guider où je me trompe?

PS: je ne peux pas utiliser <p-dataTable>.

angularprimengprimeng-datatable
5
Anna

Vous devez activer le mode multi pour le tri à l'aide de sortMode="multiple" comme ça -

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

Le tri par défaut est exécuté sur une seule colonne, afin d'activer le tri sur plusieurs champs, définissez la propriété sortMode sur "multiple" et utilisez metakey lorsque vous cliquez sur une autre colonne.

Pour plus d'informations, reportez-vous à la documentation -

0
Pardeep Jain