当前位置: 首页 > 使用教程

界面组件Kendo UI for Angular——让应用数据显示更直观!(二)

发布时间:2022-12-13

Kendo UI致力于新的开发,来满足不断变化的需求,通过React框架的Kendo UI JavaScript封装来支持React Javascript框架。Kendo UI for Angular是专用于Angular开发的专业级Angular组件,telerik致力于提供纯粹的高性能Angular UI组件,无需任何jQuery依赖关系。

Kendo UI R3 2022正式版下载

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

结果:

界面组件Kendo UI for Angular——让应用数据显示更直观!(二)
提高性能

有时我们必须在表或列表中显示大量的数据,在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-viewport
tvsItemSize="30"
headerHeight="56"
class="wrapper mat-elevation-z2"
style="height: 400px"
>
....
</cdk-virtual-scroll-viewport>

了解最新Kendo UI最新资讯,请关注Telerik中文网!

慧都2022年终促销火热开启,欢迎选购
在线
客服
微信
QQ 电话
400-700-1020
返回
顶部