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

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

本示例前提表示你已经搭建好angular运行的环境，并且已经创建好了ng-zorro项目，而且能够正常运行，接下来只是在这些基础上怎么动态的操作表格树上的节点。

上图看效果：

在线示例：https://zhtt.gitee.io/angular-demo/ng-zorro/#/list/table-tree02

api: https://www.npmjs.com/package/great-zorroutils

环境准备

安装依赖包：

npm i great-zorroutils --save

创建一个component

ng g ng-alain:empty  expand-children -m=tabledemo

修改ts文件

1、声明一个“ZorroTableTreeUtil”对象

treeUtils:ZorroTableTreeUtil;

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;
    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文件

  
demo03
  
    追加节点
    更新节点
    删除节点
  

  
    
    
      Name
      Age
      Address
    
    
    
    
      
        
          
            {{item.name}}
          
          {{item.age}}
          {{item.address}}
          删除
        
      
    
    
  

 

完整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

  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;
    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);
  }

}

示例效果如下：