Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級Angular組件，telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關系。

Kendo UI R3 2022正式版下載

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

Angular Material是Angular團隊創(chuàng)建的一個流行庫，本文將為大家介紹如何使用mat-table來構建一個數(shù)據(jù)網(wǎng)格。

在上文中，我們?yōu)榇蠹医榻B了如何開始使用Angular Material構建一個數(shù)據(jù)網(wǎng)格（點擊這里回顧>>），本文將繼續(xù)介紹如何進行排序、過濾和分頁等。

添加分頁

當顯示大量數(shù)據(jù)時，分頁是一個很好的功能，為了提供分頁，Angular Material提供了mat-paginator。

首先，我們將模塊MatPaginatorModule導入到模塊中。

import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatTableModule,
MatPaginatorModule,
],

編輯app.component.ts并為分頁器ViewChild添加一個新屬性，要從模板訪問MatPagination，請將代碼更新到訂閱中，并將MatTableDataSource的一個新示例設置為datasource，該實例使用來自訂閱和分頁器視圖子的數(shù)據(jù)。

@ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
ngOnInit(): void {
this.nbaService.getData().subscribe((data) => {
this.dataSource = new MatTableDataSource<any>(data);
this.dataSource.paginator = this.paginator;
});

}

接下來，更新模板來將表與數(shù)據(jù)源連接起來，并使用分頁選項列表配置表分頁器，添加指令showFirstLastButton激活導航按鈕從最后移動到第一個。

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" #mytable>
...
</table>
<mat-paginator [pageSizeOptions]="[3, 5, 10]" showFirstLastButtons></mat-paginator>

添加排序

要允許用戶對數(shù)據(jù)進行排序，請使用MatSort。首先，在app.module中導入MatSortModule。

import { MatSortModule } from '@angular/material/sort';

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatSortModule,
MatTableModule,
MatPaginatorModule,
],
providers: [],
bootstrap: [AppComponent],
})

export class AppModule {}

首先，為分頁器添加一個viewchild，將MatSort導入app.component.ts，并聲明一個viewchild排序來將其鏈接到模板。

import { MatSort } from '@angular/material/sort';

@ViewChild(MatSort, { static: true }) sort!: MatSort;

在ngOnInit生命周期中，賦值給數(shù)據(jù)源排序屬性MathSort viewchild。

ngOnInit(): void {
this.nbaService.getData().subscribe((data) => {
this.dataSource = new MatTableDataSource<any>(data);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}

編輯app.component.html，將matSort指令添加到表中，并為每一列添加mat-sort標題。

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" #mytable matSort>
<tr mat-header-row *matHeaderRowDef="columns" ></tr>
<tr mat-row *matRowDef="let row; columns: columns;"></tr>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let t">{{ t.first_name }}</td>
</ng-container>

<ng-container matColumnDef="team">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Position</th>
<td mat-cell *matCellDef="let t">{{ t.position }}</td>
</ng-container>
</table>

添加過濾

Angular Material現(xiàn)在并沒有附帶特定的組件或過濾器指令，為了解決這個問題，必須手動實現(xiàn)數(shù)據(jù)過濾。

我們定義了一個名為filter的方法，每當用戶在mat-input控件中輸入或刪除一個字符時，都會執(zhí)行該方法：

filter(event: Event) {
const filter = (event.target as HTMLInputElement).value;
this.dataSource.filter = filter.trim().toLowerCase();
}

當初始化dataSource的filter屬性時，視圖中顯示的數(shù)據(jù)將被更新。

<input matInput (keyup)="filter($event)" placeholder="find">

結果：

提高性能

有時我們必須在表或列表中顯示大量的數(shù)據(jù)，在DOM中添加所有這些元素會導致問題，并迫使應用程序變慢。

Angular CDK提供了一個虛擬滾動來只顯示視圖中項目的一小部分，它保持了DOM元素的數(shù)量不變，提高了應用程序的性能。

不幸的是，默認情況下，虛擬滾動CDK不能與mat-table一起工作，但是包(不是官方的)是一個允許在mat-table中使用虛擬滾動的指令。

import { MatSortModule } from '@angular/material/sort';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { TableVirtualScrollModule } from 'ng-table-virtual-scroll';

@NgModule({
declarations: [AppComponent],

imports: [
BrowserModule,
BrowserAnimationsModule,
MatSortModule,
MatTableModule,
MatPaginatorModule,
ScrollingModule,
TableVirtualScrollModule,
],
providers: [],
bootstrap: [AppComponent],
})

export class AppModule {},

將MatTableDataSource更改為TableVirtualScrollDataSource。

this.nbaService.getData().subscribe((data) => {
this.dataSource = new TableVirtualScrollDataSource(data);
});

注意：ng-table-virtual-scroll不是官方包。

編輯模板：

<cdk-virtual-scroll-viewport
tvsItemSize="30"
headerHeight="56"
class="wrapper mat-elevation-z2"
style="height: 400px"
>
....
</cdk-virtual-scroll-viewport>