使用 PrimeNG 突出显示两列（或更多列）的多列排序

Question

我可以在将 p-table 与 PrimeNG 一起使用时对多列进行排序，如下所示：

[multiSortMeta]="[{field: 'quantity', order: -1}, {field: 'price', order: 1}]"

<h3>Multi Sort Columns</h3>
<p-table
  [columns]="cols"
  [value]="cars1"
  [lazy]="lazy"
  [lazyLoadOnInit]="lazyLoadOnInit"
    (onLazyLoad)="loadList($event)"
  [sortMode]="sortMode"
  [multiSortMeta]="[{field: 'quantity', order: -1}, {field: 'price', order: 1}]">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

然而，默认突出显示两列可能会造成混淆。如何对两列进行默认排序，但只突出显示第一列？

Answer 1

假设您想按 quantity 和 price 对数据进行排序，但只在 table 中显示 quantity 指标。

首先，将您的服务返回的数据按 price:

排序

this.productService.getProductsSmall().then(data => {
  this.products2 = data.sort((a, b) => a.price - b.price);
});

或者如果您想要相反的顺序：

this.productService.getProductsSmall().then(data => {
  this.products2 = data.sort((a, b) => b.price - a.price);
});

然后，替换

[multiSortMeta]="[{field: 'quantity', order: -1}, {field: 'price', order: 1}]"

和

[multiSortMeta]="[{field: 'quantity', order: -1}]"

仅显示 quantity 指标。

它应该是你需要的。

见demo

使用 PrimeNG 突出显示两列（或更多列）的多列排序

Multicolumn sort without having two columns (or more) highlighted with PrimeNG

sorting

primeng

angular