时间戳

首页 > 解决方案 > 我可以使用 MatTable 按选定的行排序吗？

angular - 我可以使用 MatTable 按选定的行排序吗？

问题描述

我有一个 MatTable，它实现了 Angular Material文档所示的选择

一切正常，做出选择等；但我在想是否可以应用某种排序，以便我可以对 DataSource 进行排序，以便首先显示选定的行。

<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功能，但我真的不明白它是如何工作的；对此的任何帮助表示赞赏。

标签： angulartypescriptangular-materialmat-table

解决方案

你可以做这样的事情。

这就是复选框的工作原理。

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

基本上，因为当数据传递给sortingDataAccessor时我的matColumnDef是'select'，你需要检查它是否匹配'select'。一旦您知道它与“选择”匹配，您就可以检查您的项目（即当前行）是否包含在所选项目的数组（ selection.selected 数组）中。

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

我还介绍了如何对嵌套对象进行排序。如果你需要它。如果您有嵌套对象，则需要在 switchcase 中编写类似 case 'nestedObject' 的内容。'nestedObject' 就是您在表中调用列的任何内容。

我在我的项目中检查了它，它工作正常。

祝你好运！

推荐阅读