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

Kendo UI R3 2022正式版下載

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

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

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

添加分頁

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

首先，我們將模塊MatPaginatorModule導(dǎo)入到模塊中。

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

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

編輯app.component.ts并為分頁器ViewChild添加一個(gè)新屬性，要從模板訪問MatPagination，請將代碼更新到訂閱中，并將MatTableDataSource的一個(gè)新示例設(shè)置為datasource，該實(shí)例使用來自訂閱和分頁器視圖子的數(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ù)源連接起來，并使用分頁選項(xiàng)列表配置表分頁器，添加指令showFirstLastButton激活導(dǎo)航按鈕從最后移動到第一個(gè)。

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

添加排序

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

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

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

export class AppModule {}

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

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

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

在ngOnInit生命周期中，賦值給數(shù)據(jù)源排序?qū)傩訫athSort 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標(biāo)題。

<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)在并沒有附帶特定的組件或過濾器指令，為了解決這個(gè)問題，必須手動實(shí)現(xiàn)數(shù)據(jù)過濾。

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

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

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

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

結(jié)果：

提高性能

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

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

不幸的是，默認(rèn)情況下，虛擬滾動CDK不能與mat-table一起工作，但是包(不是官方的)是一個(gè)允許在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>