angular简单使用ztree

最新推荐文章于 2021-04-12 00:01:31 发布

原创最新推荐文章于 2021-04-12 00:01:31 发布 · 668 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文介绍了如何在Angular项目中使用ZTree，包括通过npm安装ZTree包的步骤，以及在页面创建过程中的关键操作。详细步骤可参考链接。

效果图

1.导入包

npm i ztree -S -save

具体操作

https://blog.csdn.net/qq_41896729/article/details/112464133

创建页面

<div style="display:flex;padding-top:30px;height: 360px">
  <div class="left-model" style="height: 500px;width: 900px;color: #7a869d">
    <ul id="ztree" class="ztree"></ul>
  </div>
  <div class="right-model">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:500px;"></div>
  </div>
</div>

ts

// @ts-ignore
import { Component, OnInit } from '@angular/core';
declare var echarts: any;
declare var url: any;
declare var $: any;
// @ts-ignore
@Component({
  selector: 'app-dept-tree-show',
  templateUrl: './dept-tree-show.component.html',
  styleUrls: ['./dept-tree-show.component.css']
})
export class DeptTreeShowComponent implements OnInit {

  constructor() {
  }
  // 部门树结构数据
  deptTree;

  setting = {
    data: {
      simpleData: {
        enable: true
      },
    },
      callback: {
        onClick: this.onCzTreeOnClick
      }

  };
  zNodes = [
  ];


  ngOnInit(): void {
    // console.log($);
    // console.log($.fn.zTree);
    this.getDeptTreeData();
    this.generateChart();
    $.fn.zTree.init($("#ztree"),this.setting,this.zNodes);

    var treeObj = $.fn.zTree.getZTreeObj("ztree");
    var nodes = treeObj.getNodes();
    for (var i = 0; i < nodes.length; i++) { //设置节点展开
      treeObj.expandNode(nodes[i], true, true, true);
    }
  }

  // 生成图表
  // tslint:disable-next-line:typedef
  generateChart() {
    // 基于准备好的dom，初始化echarts实例
    // tslint:disable-next-line:prefer-const
    let myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    // tslint:disable-next-line:prefer-const
    let option = {
      title: {
        text: '部门终端设备统计信息'
      },
      tooltip: {},
      legend: {
        data: ['终端设备统计信息']
      },
      xAxis: {
        data: ['部门1', '部门2', '部门3', '部门4', '部门5', '部门6']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }, {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

  // 加载部门树结构数据
  // tslint:disable-next-line:typedef
  getDeptTreeData() {
    const flag = this;
    //
    $.ajax({
      url: url() + '/sysDept/getDeptTreeList',
      data: '',
      type: 'get',
      async: false,
      headers: {Authorization: $('#token')[0].innerHTML},
      // data=就是返回的数据，textStatus和request不能删除。缺一不可。
      // tslint:disable-next-line:typedef
      success(data) {
        var a =data.data;

        a.forEach(function(value, index) {

          var aa = {id:value.sysDeptId,pId:value.parentId,name:value.deptName,}
          flag.zNodes.push(aa);
        });

        // this.zNodes
      }
    });
  }

  onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
      // alert(treeId);
      alert(treeNode.id);
    }
}