版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaoqingkaitt/article/details/88075172
在开发中,有时需要以表格树的形式加载数据,但是数据量特别大时,可能只是先加载一层,如果有子节点就在名称前显示一个“+”号或其它图标,然后点击“+”再展示子节点。
本示例前提表示你已经搭建好angular运行的环境,并且已经创建好了ng-zorro项目,而且能够正常运行,接下来只是在这些基础上怎么动态的操作表格树上的接口。
环境准备
安装依赖包:
npm i great-zorroutils --save
创建一个component
ng g ng-alain:empty expand-children -m=tabledemo
修改ts文件
1、声明一个“ZorroTableTreeUtil”对象
treeUtils:ZorroTableTreeUtil<any>;
2、在ngOnInit方法中,加载服务端数据,然后实例化treeUtils
ngOnInit() {
this.treeUtils=new ZorroTableTreeUtil({
keys: {idKey: "key", pIdKey: "parentKey", pKey: "parent", childKey: "children"},
data: this.data
});
this.treeUtils.init();
}
3、创建增加、修改、删除节点的方法
toAddNode() {
let newNodes = [{
key: Math.random(),
name: 'John Brown' + Math.random(),
age: Math.random(),
parentKey: "11",
address: 'New York No. 2 Lake Park',
}] as Array<any>;
this.treeUtils.toAddNode(newNodes);
}
toUpdateNode() {
let newNode = {
key: 11,
name: 'John Brown' + Math.random(),
age: Math.random(),
address: 'New York No. 2 Lake Park',
};
this.treeUtils.toUpdateNode(newNode);
}
toRemoveNode(item?: any) {
if (item) {
this.treeUtils.toRemoveNode(item);
}
}
4、增加一个,点击“+”时,去后台加载子节点的方法
collapse(array: any[], data: any, $event: boolean): void {
this.treeUtils.collapse(array, data, $event);
this.loadChildren(data);
}
loadChildren(data: any) {
let newNodes = [{
key: Math.random(),
name: 'John Brown' + Math.random(),
age: Math.random(),
address: 'New York No. 2 Lake Park',
}];
if (data && !data["children"]) {
this.treeUtils.addNodes(data, newNodes);
}
}
修改html文件
<nz-card>
<h2>demo03</h2>
<nz-button-group>
<button nz-button nzType="primary" (click)="toAddNode()"><i nz-icon type="plus" theme="outline"></i>追加节点</button>
<button nz-button nzType="primary" (click)="toUpdateNode()"><i nz-icon type="edit" theme="outline"></i>更新节点</button>
<button nz-button nzType="primary" (click)="toRemoveNode()"><i nz-icon type="delete" theme="outline"></i>删除节点</button>
</nz-button-group>
<nz-table #nzTable [nzData]="treeUtils?.data">
<thead>
<tr>
<th nzWidth="40%">Name</th>
<th nzWidth="30%">Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-data [ngForOf]="nzTable.data">
<ng-template ngFor let-item [ngForOf]="treeUtils?.expandDataCache[data.key]">
<tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
<td [nzIndentSize]="item.level*20" [nzShowExpand]="!!item && (!!item.children || item.hasChildren)" [(nzExpand)]="item.expand" (nzExpandChange)="collapse(treeUtils?.expandDataCache[data.key],item,$event)">
{{item.name}}
</td>
<td>{{item.age}}</td>
<td>{{item.address}}</td>
<td (click)="toRemoveNode(item)">删除</td>
</tr>
</ng-template>
</ng-template>
</tbody>
</nz-table>
</nz-card>
完整ts代码如下
import { Component, OnInit } from '@angular/core';
import {ZorroTableTreeUtil} from "great-zorroutils";
@Component({
selector: 'app-table-expand-children',
templateUrl: './expand-children.component.html',
})
export class TableExpandChildrenComponent implements OnInit {
data=[
{
key: 1,
name: 'John 01.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [
{
key: 11,
name: 'John 01-01',
age: 42,
hasChildren: true,
address: 'New York No. 2 Lake Park'
},
{
key: 12,
name: 'John 01-02',
age: 30,
address: 'New York No. 3 Lake Park'
}
]
},
{
key: 2,
name: 'Joe 02',
age: 32,
address: 'Sidney No. 1 Lake Park'
}
];
treeUtils:ZorroTableTreeUtil<any>
constructor() {
}
ngOnInit() {
this.treeUtils=new ZorroTableTreeUtil({
keys: {idKey: "key", pIdKey: "parentKey", pKey: "parent", childKey: "children"},
data: this.data
});
this.treeUtils.init();
}
toAddNode() {
let newNodes = [{
key: Math.random(),
name: 'John Brown' + Math.random(),
age: Math.random(),
parentKey: "11",
address: 'New York No. 2 Lake Park',
}] as Array<any>;
this.treeUtils.toAddNode(newNodes);
}
toUpdateNode() {
let newNode = {
key: 11,
name: 'John Brown' + Math.random(),
age: Math.random(),
address: 'New York No. 2 Lake Park',
};
this.treeUtils.toUpdateNode(newNode);
}
toRemoveNode(item?: any) {
if (item) {
this.treeUtils.toRemoveNode(item);
}
}
loadChildren(data: any) {
let newNodes = [{
key: Math.random(),
name: 'John Brown' + Math.random(),
age: Math.random(),
address: 'New York No. 2 Lake Park',
}];
if (data && !data["children"]) {
this.treeUtils.addNodes(data, newNodes);
}
}
collapse(array: any[], data: any, $event: boolean): void {
this.treeUtils.collapse(array, data, $event);
this.loadChildren(data);
}
}