PrimeNg <p-table> сортировка - PullRequest
Новая
       17

PrimeNg <p-table> сортировка

0 голосов
/ 28 июня 2018

Я использую 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>.

Ответы [ 3 ]

0 голосов
/ 26 июля 2018

Для сортировки с турбо таблицей / р-таблицей с фиксированным столбцом попробуйте код ниже 

                <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>
0 голосов
/ 06 августа 2018

если я правильно понял ваш вопрос, вы не запрашиваете возможность сортировать несколько столбцов одновременно, а просто сортировка не работает. В вашем коде проблема заключается в том, что вы указываете в заголовке таблицы следующее поле столбцов для сортировки: 

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

Он также более легкий, и никаких изменений в файле ts не требуется, даже если вы берете данные из веб-службы, поскольку с точки зрения файла html вы всегда передаете объект «документы».

0 голосов
/ 28 июня 2018

Вам нужно включить мультирежим для сортировки, используя sortMode="multiple" вот так - 

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

Сортировка по умолчанию выполняется для одного столбца, чтобы включить сортировку по нескольким полям, установите для свойства sortMode значение «несколько» и используйте метаключ при нажатии на другой столбец.

Для получения дополнительной информации см. Документацию -

...