angular - Kan jag sortera efter valda rader med en MatTable?

Jag har en MatTable som implementerar val som anges av Angular Materials dokumentation

Allt fungerar bra, valet är gjort, osv; men jag funderade på om det är möjligt att tillämpa någon form av sortering så att jag kan sortera datakällan så att de valda raderna visas först.

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

Jag tittar på sortingDataAccesor-funktionen men jag förstår verkligen inte hur den fungerar; all hjälp med detta uppskattas.

Svar #1

du kan göra något liknande detta.

så här fungerar kryssrutan.

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

och i TypeScript skriver du.

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];
        }
      };

i princip eftersom min matColumnDef är 'select', när data skickas till sortingDataAccessor behöver du kontrollera om det matchar 'select'. när du vet att det matchar 'select' kan du kontrollera om ditt objekt (det vill säga den aktuella raden) ingår i arrayen av valda objekt (selection.selected array).

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

Jag inkluderade också hur man sorterar i nästlade objekt. Om du behöver det. Om du har ett nästlat objekt behöver du skriva något som case 'nestedObject' i switch-case. 'nestedObject' är bara vad du kallar din kolumn i tabellen.

Jag kontrollerade det i mitt projekt och det fungerar bra.

Lycka till!

Relaterade artiklar