TurboTable custom Сортировка по одному столбцу

Есть ли способ применить customSort только к одному столбцу с помощью TurboTables и разрешить другим столбцам использовать сортировку по умолчанию?

В документации customSort применяется ко всей таблице. https://www.primefaces.org/primeng/#/table/sort


person Kevin    schedule 16.03.2018    source источник


Ответы (2)


Я нашел способ сделать это (опуская менее важные части кода):

<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
}
person Rodolfo Jorge Nemer Nogueira    schedule 29.08.2018

Я обнаружил, что самый простой способ сделать это - установить для всей таблицы настраиваемую сортировку, а в рамках настраиваемой сортировки вы можете указать, как обрабатывать разные столбцы. В моем случае у меня был столбец, основанный на свойстве объекта, поэтому мне пришлось сортировать на основе этого свойства, а не на основе поля.

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);
    });
  }
person dmoore1181    schedule 05.12.2019