懂你所需,做你所想
当前位置: 仙桃云科 > 新闻资讯 >

Angular整合zTree、异步加载节点数据

发表日期:2018-01-20文章编辑:仙桃云科网络科技有限公司

  

1 前提准备

  1.1 新建一个angular4项目

    参考博文:点击前往

      

  1.2 去zTree官网下载zTree

    zTree官网:点击前往

    三少使用的版本:点击前往

      

   1.3 参考博客

    点击前往01        点击前往02      

2 编程步骤

  

  从打印出zTree对象可以看出,zTree对象利用init方法来实现zTree结构;init方法接收三个参数

    参数1:一个ul标签的DOM节点对象

    参数2:基本配置对象

    参数3:标题信息数组

  2.1 在index.html中引入相关js、css

    

View Code

  2.2 在TS文件中声明jquery对象

declare var $ : any;

  2.3 在TS文件中编写代码

    

View Code

  2.4 在组件HTML中编写代码

<ul id="ztree" class="ztree"><ul></ul>

  2.5 效果展示

    

 

3 zTree基本功能

  3.1 不显示连接线

    3.1.1 官方文档

      不显示标题之间的连接线

      

    3.1.2 编程步骤

      在基本配置对象中指定showLine属性的值为false即可

复制代码
  setting = {
    data: {
      simpleData: {
        enable: true
      }
    },
    view: {
      showLine: false
    }
  };
复制代码

  3.2 不显示节点图标

    3.2.1 官方文档

      去掉节点前面的图标

      

    3.2.2 编程步骤

      将基本配置对象的showIcon属性设为false即可

      

View Code

  3.3 自定义节点图标

    3.3.1 官方文档

      更改节点的图标

      

    3.3.2 编程步骤

      为treeNode节点数据设置icon/iconOpen/iconClose属性即可

      

  3.4 自定义字体

    3.4.1 官方文档

      更改节点字体的样式

      

    3.4.2 编程步骤

      为treeNode节点数据设置font属性即可,font属性的值是一个对象,该对象的内容和style的数据一样

      

    3.4.3 效果展示

      

  3.5 超链接

    3.5.1 官方文档

      点击节点标题就会自动跳转到对应的url

      注意01:click属性只能进行最简单的 click 事件操作。相当于 onclick="..." 的内容。 如果操作较复杂,请使用 onClick 事件回调函数。

      

    3.5.2 编程步骤

      为treeNode节点数据设置url、click属性即可

      技巧01:设置click属性时,属性值必须是一些简单的onClick事件

      技巧02:设置target属性时,属性值有 _blank 和 _self

        _blank -> 用一个新窗口打开

        _self -> 在原来的窗口打开

      

View Code

 

  3.6 单击控制

    3.6.1 官方文档

      点击节点标题时触发相应的方法

      技巧01:在angular中可以利用这个用法来实现路由跳转

      

    3.6.2 编程步骤

      设置基本配置对象的onClick属性

      技巧01:onClick属性值是一个方法的引用,我们需要自己编写这个方法

      

View Code

      编写onClick触发方法

      

View Code

    3.6.3 代码汇总

View Code

  3.7 异步加载节点数据

    3.7.1 官方文档

      节点的数据是从后台进行获取的

      

    3.7.2 编程步骤

      技巧01:异步加载节点数据时init方法不用传递第三个参数

         

      > 准备一个后台用于返回JSON格式的数据

        技巧01:返回的JSON数据是一个列表,格式为

复制代码
[
    {
      "id": 1,
      "pId": 0,
      "name": "1 one"
    },
    {
      "id": 2,
      "pId": 0,
      "name": "2 two"
    }
  ]
复制代码

        技巧02:三少偷懒,是利用json-server模拟的后台数据,哈哈;json-server 使用教程请参见 -> 点击前往

       > 设置基本配置对象的async属性

        

View Code

      > 编写响应数据处理方法

        

View Code

    3.7.3 代码总汇

模拟后台响应数据
HTML
TS

    3.7.4 效果展示

      

如没特殊注明,文章均为仙桃云科网络原创,转载请注明来自>
相关新闻

对 url 中含有的中文进行转码操...

一般情况下,将带有中文的 url 拷贝到开发工具,开发工具都会有相应的转码(自动转码), 现在大部分的浏览器也可以对含有中文的 url 进行转码(自动转码) 情景说明 andro...

日期:2018-07-27

【视频编解码·学习笔记】6. H.2...

一、准备工作: 新建一个VS工程 SimpleH264Analyzer , 修改工程属性参数- 输出目录: $(SolutionDir)bin\$(Configuration)\ ,工作目录: $(SolutionDir)bin\$(Configurat...

日期:2018-02-12

A/X家FPGA架构及资源评估...

评估对比xilinx以及altera两家FPGA芯片逻辑资源。 首先要说明, 现今FPGA除了常规逻辑资源,还具有很多其他片内资源比如块RAM、DSP单元、高速串行收发器、PLL、ADC等等,用...

日期:2018-02-03

HashMap 源码详细分析(JDK1.8)...

一、概述 本篇文章我们来聊聊大家日常开发中常用的一个集合类 - HashMap 。HashMap 最早出现在 JDK 1.2中,底层基于散列算法实现。HashMap 允许 null 键和 null 值,在计算...

日期:2018-01-22

Angular整合zTree、异步加载节点...

1 前提准备 1.1 新建一个angular4项目 参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网:点击前往 三少使用的版本:点击前往 1.3 参考博客 点击前往01 点击前往02 ...

日期:2018-01-20

记一次高并发场景下.net监控程序...

最近在和小伙伴们做充电与通信程序的架构迁移。迁移前的架构是,通信程序负责接收来自充电集控设备的数据实时数据,通过Thrift调用后端的充电服务,充电服务收到响应后放到...

日期:2017-12-23