前端——angular树的使用及效果展示

时间：2024-05-19 15:47:48

前言

  小编最近在做项目的时候用的佐罗的控件来进行数据显示，佐罗的 Ant Design 的 Angular 实现地址在这里：https://ng.ant.design/docs/introduce/zh 很多样式和模板可以供我们参考和应用。下面是小编进行的一个nz-tree树的使用，仅供参考

html部分代码： 

<nz-tree #treeCom [nzData]="nodes_Academy" [nzAsyncData]="false" nzCheckable="false" nzMultiple="false" [nzCheckedKeys]="defaultCheckedKeys"
              [nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]="defaultSelectedKeys" (nzClick)="openFolder($event,$event)">
</nz-tree>

ts部分代码

/**
   * 单击树结点内容加载树的子节点
   * @param eventData 结点数组
   * @param datas 结点数组
   */
  openFolder(eventData: any, datas: NzTreeNode | NzFormatEmitEvent): void {
    if (datas instanceof NzTreeNode) {
      datas.isExpanded = !datas.isExpanded;
    } else {
      datas.node.isExpanded = !datas.node.isExpanded;
      eventData.node.clearChildren();
      if (eventData.node.level === 0) {
        this.nodes_profession = [];
        this.academyId = eventData.node.key;
        console.log('this.academyId', this.academyId);
        console.log('eventData.node.key', eventData.node.key);
        console.log('eventData.node', eventData.node);
        const url = 'exam-web/profession/findByAcademyId/' + this.academyId;
        this.http.get(url).subscribe(res => {
          if (res.json().code === ResponseCode.SUCCESSCODE) {
            if (res.json().length === 0) {
              this.tipMsgService.createMessage('温馨提示', '获取数据为空');
            } else {
              for (let i = 0; i < res.json().data.length; i++) {
                this.nodes_profession.push({
                  key: res.json().data[i].id,
                  title: res.json().data[i].name,
                });
              }
              eventData.node.addChildren(this.nodes_profession);
            }
          } else if (res.json().code === ResponseCode.FAILCODE) {
            this.tipMsgService.createMessage(ResponseCode.ErrorTip, '房间树初始化查询失败');
          }
        });
      } else if (eventData.node.level === 1) {
        this.nodes_course = [];
        // 结点等级为1，根据专业id查询课程树
        this.professionId = eventData.node.key;
        const url = 'exam-web/trainingPrograms/findCourseByProfessionId/' + this.professionId;
        this.http.get(url).subscribe(res => {
          if (res.json().code === ResponseCode.SUCCESSCODE) {
            if (res.json().length === 0) {
              this.tipMsgService.createMessage('温馨提示', '获取数据为空');
            } else {
              for (let i = 0; i < res.json().data.length; i++) {
                this.nodes_course.push({
                  key: res.json().data[i].courseId,
                  title: res.json().data[i].name,
                  isLeaf: true
                });
              }
              eventData.node.addChildren(this.nodes_course);
            }
          } else if (res.json().code === ResponseCode.FAILCODE) {
            this.tipMsgService.createMessage(ResponseCode.ErrorTip, '房间树初始化查询失败');
          }
        });
      } else if (eventData.node.level === 2 && eventData.node.isLeaf === true) {

        this.courseId = eventData.node.key;
        this.getTableData();

      }
    }
  }

  小编实现的功能是点击树节点，实现单节点查询，绑定的事件是(nzClick)="openFolder($event,$event)"
  树节点的使用就在ts中，需要的可以参考小编的代码，原理就是把后端返回来的json数据赋值到树的数组中，也可以根据自己的需要在前端或者后端将内容转变

效果图展示

前端——angular树的使用及效果展示

总结

  小编对于佐罗树的使用到这里就结束了，希望对您有所帮助

相关文章