界面组件Kendo UI for Angular——让应用数据显示更直观！（二）

本文将为大家介绍如何使用界面组件Kendo UI for Angular的
Angular Material来实现数据格的各种功能，欢迎下载最新版组件体验！

Kendo UI致力于新的开发，来满足不断变化的需求，通过React框架的Kendo UI JavaScript封装来支持React Javascript框架。

Telerik_KendoUI产品技术交流群：726377843    欢迎一起进群讨论

Angular Material是Angular团队创建的一个流行库，本文将为大家介绍如何使用mat-table来构建一个数据网格。

在上文中，我们为大家介绍了如何开始使用Angular Material构建一个数据网格（点击这里回顾>>），本文将继续介绍如何进行排序、过滤和分页等。

添加分页

当显示大量数据时，分页是一个很好的功能，为了提供分页，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，该实例使用来自订阅和分页器视图子的数据。

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

接下来，更新模板来将表与数据源连接起来，并使用分页选项列表配置表分页器，添加指令showFirstLastButton激活导航按钮从最后移动到第一个。

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

添加排序

要允许用户对数据进行排序，请使用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生命周期中，赋值给数据源排序属性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现在并没有附带特定的组件或过滤器指令，为了解决这个问题，必须手动实现数据过滤。

我们定义了一个名为filter的方法，每当用户在mat-input控件中输入或删除一个字符时，都会执行该方法：

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

当初始化dataSource的filter属性时，视图中显示的数据将被更新。

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

结果：

提高性能

有时我们必须在表或列表中显示大量的数据，在DOM中添加所有这些元素会导致问题，并迫使应用程序变慢。

Angular CDK提供了一个虚拟滚动来只显示视图中项目的一小部分，它保持了DOM元素的数量不变，提高了应用程序的性能。

不幸的是，默认情况下，虚拟滚动CDK不能与mat-table一起工作，但是包https://github.com/diprokon/ng-table-virtual-scroll(不是官方的)是一个允许在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-viewporttvsItemSize="30"headerHeight="56"class="wrapper mat-elevation-z2"style="height: 400px">....</cdk-virtual-scroll-viewport>

了解最新Kendo UI最新资讯，请关注Telerik中文网！

来源：慧都