PrimeNg <p-table>排序

Question

我正在使用primeNg <p-table>。我想实现数据排序。我所做的如下

排序

<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>

排序

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>。

Answer 1

对于具有固定列的Turbo表/ p表排序，请尝试以下代码

                <p-table #dt [value]="data">
                <ng-template pTemplate="header">
                    <tr>
                        <th [pSortableColumn]="'Name'">Name
                            <p-sortIcon [field]="'Name'"></p-sortIcon>
                        </th>
                        <th [pSortableColumn]="'Age'">Age
                            <p-sortIcon [field]="'Age'"></p-sortIcon>
                        </th>
                        <th [pSortableColumn]="'Height'">Height
                            <p-sortIcon [field]="'Height'"></p-sortIcon>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-col>
                    <tr>
                        <td>{{col.Name}}</td>
                        <td>{{col.Age}}</td>
                        <td>{{col.Height}}</td>
                    </tr>
                </ng-template>
            </p-table>

Answer 2

如果我提出的问题正确，那么您并不是在要求能够同时对多个列进行排序，而只是无法进行排序。在您的代码中，问题在于您要在表的标题中指定要排序的以下几列字段：

[pSortableColumn]="col.field"

这些字段定义为：

this.cols = [
            { field: 'name', header: 'Name' },    
            { field: 'year', header: 'Year' },
            { field: 'age', header: 'Age' },
            { field: 'color', header: 'Color' }
        ];

但是您的数据以不同的名称到达：

this.documents=[{
          "sName":"Jhon",
          "sYear":"1994",
          "sAge":"20",
          "sColor":"Red"
},
[...]

“ name”！=“ sName”，因此您的表无法对数据进行排序。实际上，您说“名称”列是可排序的，我感到很惊讶。

只需更改定义，代码即可正常工作。

无论如何，为了允许多列排序，我建议将代码更改为：

<p-table [columns]="cols" [value]="documents" sortMode="multiple">
    <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 let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{doc[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

它也更轻巧，即使您从Web服务获取数据，也不需要更改ts文件，因为从html文件的角度来看，您始终在传递“文档”对象。

Answer 3

您需要启用多模式进行排序，sortMode="multiple"如下所示 -

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

默认排序是在单列上执行的，为了启用多字段排序，请将 sortMode 属性设置为“multiple”，并在单击另一列时使用元键。

有关更多信息，请参阅文档 -

• https://primefaces.org/primeng/#/table