primeng - TurboTable 自定义单列排序

Question

有没有办法使用 TurboTables 仅将 customSort 应用于一列并允许其他列使用默认排序？

该文档将 customSort 应用于整个表。https://www.primefaces.org/primeng/#/table/sort

Answer 1

我找到了一种方法来做到这一点（省略代码中不太重要的部分）：

<p-table #tbSearch [value]="itens"...>

...
<th class="ui-sortable-column" (click)="customSort()">
    <p-sortIcon field="any.field.name.alias"></p-sortIcon> Total R$
</th>
...

零件：

import { Table } from 'primeng/table';
@ViewChild('tbSearch') tbSearch: Table;

customSort() {
    this.tbSearch.sortField = 'any.field.name.alias';
    this.tbSearch.sortOrder = -this.tbBusca.sortOrder;
    this.itens = this.itens.reverse(); // < ------ Change the original array order, for example
}

Answer 2

我发现最简单的方法是将整个表格设置为自定义排序，并且在自定义排序中您可以指定如何处理不同的列。在我的情况下，我有一个基于对象属性的列，所以我必须根据该属性进行排序，而不是基于字段。

HTML：

<p-table
    #dt
    [columns]="selectedColumns"
    [value]="filteredItems"
    [rowsPerPageOptions]="rowsPerPage"
    [loading]="loading"
    paginator="true"
    [rows]="20"
    sortMode="single"
    sortField="date"
    [resizableColumns]="true"
    [reorderableColumns]="true"
    responsive="true"
    rowExpandMode="single"
    dataKey="itemId"
    loadingIcon="fa fa-spinner"
    (sortFunction)="customSort($event)"
    [customSort]="true"
>

    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field" pResizableColumn pReorderableColumn>
            {{col.header}}
            <p-sortIcon [field]="col.field"></p-sortIcon>
          </th>

打字稿：

//Most of this code was derived from the primeng documentation, but I have changed it to suite my needs and company code styles. 
customSort(event: SortEvent) {
    event.data.sort((data1, data2) => {
      let value1 = data1[event.field];
      let value2 = data2[event.field];

      if (event.field === 'user') {
        value1 = (value1 as User).displayName;
        value2 = (value2 as User).displayName;
      }

      let result: number;

      if (value1 === undefined && value2 !== undefined) {
        result = -1;
      } else if (value1 !== undefined && value2 === undefined) {
        result = 1;
      } else if (value1 === undefined && value2 === undefined) {
        result = 0;
      } else if (typeof value1 === 'string' && typeof value2 === 'string') {
        result = value1.localeCompare(value2);
      } else {
        result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
      }
      return (event.order * result);
    });
  }