ng-zorro中表格树的动态添加、修改、删除节点操作

在开发中，有时需要以表格树的形式加载数据，但是数据量特别大时，可能只是先加载一层，如果有子节点就在名称前显示一个“+”号或其它图标，然后点击“+”再展示子节点。

本示例前提表示你已经搭建好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);
  }

}

示例效果如下：