Могу ли я сортировать по выбранным строкам, используя MatTable? - PullRequest
Новая
       68

Могу ли я сортировать по выбранным строкам, используя MatTable?

1 голос
/ 19 сентября 2019

У меня есть MatTable, который реализует выделение, как указано в документации Angular Material

Все работает нормально, выбор сделан и т. Д .;но я подумал, можно ли применить какую-то сортировку, чтобы я мог отсортировать источник данных, чтобы сначала отображались выбранные строки. 

<table mat-table matSort [dataSource]="dataSourcePPC" class="w-100 table-bordered table-hover">
   <ng-container matColumnDef="select">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let row" class="text-center">
          <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectionPPC.toggle(row) : null;"
                        [checked]="selectionPPC.isSelected(row)">
          </mat-checkbox>
       </td>
   </ng-container>
   <ng-container matColumnDef="type">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
       <td mat-cell *matCellDef="let ppc">{{ ppcTypeModel[ppc.type] }}</td>
   </ng-container>

   ...

   <tr mat-header-row *matHeaderRowDef="displayedColumnsPPC"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumnsPPC;" [ngClass]="{'selected': selectionPPC.isSelected(row)}" (click)="selectionPPC.toggle(row)"></tr>
</table>

Я смотрю на функцию sortingDataAccesor, но я действительно нене понимаю, как это работает;любая помощь в этом отношении приветствуется.

1 Ответ

1 голос
/ 19 сентября 2019

вы можете сделать что-то вроде этого.

вот как работает флажок. 

  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
        [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
      </mat-checkbox>
      <div mat-sort-header>
        <mat-icon>ac_unit</mat-icon>
      </div>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
        [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
      </mat-checkbox>
    </td>
  </ng-container>

и в машинописном тексте, который вы пишете. 

this.dataSource.sortingDataAccessor = (item, property) => {
        switch (property) {
          case 'select': return this.selection.selected.includes(item);
          case 'nestedObject': return item.parentObject.childObject;
          default: return item[property];
        }
      };

в основном, так как мой matColumnDef является 'select', когда данные передаются вsortingDataAccessor вам нужно проверить, соответствует ли он 'select'.как только вы знаете, что это соответствует «select», вы можете проверить, включен ли ваш элемент (имеется в виду текущая строка) в массив выбранных элементов (selection.selected array).

selection = new SelectionModel(true, []); // you already should have this since you have select.

Я также включил сортировку во вложенных объектах.Если вам это нужно.если у вас есть вложенный объект, вам нужно написать что-то вроде case 'nestedObject' в switchcase.'nestedObject' - это то, что вы называете своим столбцом в таблице.

Я проверил его в своем проекте, и он отлично работает.

Удачи!

...