首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解Angular结合zTree异步加载节点数据

Posted in Javascript onJanuary 20, 2018

1 前提准备

1.1 新建一个angular4项目

参考：https://3water.com/article/119668.htm

详解Angular结合zTree异步加载节点数据

1.2 去zTree官网下载zTree

zTree官网：点击前往

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

详解Angular结合zTree异步加载节点数据

1.3 参考博客

2 编程步骤

详解Angular结合zTree异步加载节点数据

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

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

参数2：基本配置对象

参数3：标题信息数组

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

详解Angular结合zTree异步加载节点数据

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>TestZtree</title>
 <base href="/" rel="external nofollow" >

 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico" rel="external nofollow" >

 <link rel="stylesheet" type="text/css" href="./assets/zTree/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="./assets/zTree/css/demo.css" rel="external nofollow" >
 <script src="./assets/zTree/js/jquery-1.4.4.min.js"></script>
 <script src="./assets/zTree/js/jquery.ztree.core.js"></script>
</head>
<body>
 <app-root></app-root>
</body>
</html>
View Code

2.2 在TS文件中声明jquery对象

declare var $ : any;

2.3 在TS文件中编写代码

详解Angular结合zTree异步加载节点数据

  
import { Component, OnInit } from '@angular/core';
declare var $ : any;
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

 // setting = {
 // view: {
 // showLine: true,
 // showIcon: true,
 // fontCss: this.getFont
 // },
 // data: {
 // simpleData: {
 // enable: true,
 // idKey: 'id',
 // pIdKey: 'pId'
 // }
 // },
 // callback: {
 // onClick: this.onCzTreeOnClick
 // }
 // };
 // zNodes = [
 // {id: 1, pId: 0, name: '1 一级标题', open: true, iconOpen:"assets/zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"assets/zTree/css/zTreeStyle/img/diy/1_close.png"},
 // {id: 11, pId: 1, name: '1.1 二级标题', open: true, font:{'background-color':'skyblue', 'color':'white'}},
 // {id: 111, pId: 11, name: '1.1.1 三级标题 -> 博客园', url: 'http://www.cnblogs.com/NeverCtrl-C/'},
 // {id: 112, pId: 11, name: '1.1.2 三级标题 -> 单击', click: "alert('你单击了')"},
 // {id: 12, pId: 1, name: '1.2 二级标题'},
 // {id: 2, pId: 0, name: '2 一级标题'}
 // ]
 // getFont(treeId, node) {
 // return node.font ? node.font : {};
 // }
 // onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
 // alert(treeNode.name);
 // } 
 setting = {
 data: {
 simpleData: {
 enable: true
 }
 }
 };
 zNodes = [
 {id: 1, pId: 0, name: '1 一级标题'},
 {id: 11, pId: 1, name: '1.1 二级标题'},
 {id: 111, pId: 11, name: '1.1.1 三级标题'},
 {id: 112, pId: 11, name: '1.1.2 三级标题'},
 {id: 12, pId: 1, name: '1.2 二级标题'},
 {id: 2, pId: 0, name: '2 一级标题'}
 ];
 constructor() { }
 ngOnInit() { 
 console.log($);
 console.log($.fn.zTree);
 $.fn.zTree.init($("#ztree"),this.setting,this.zNodes);
 }
}
View Code

2.4 在组件HTML中编写代码

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

2.5 效果展示

详解Angular结合zTree异步加载节点数据

3 zTree基本功能

3.1 不显示连接线

3.1.1 官方文档

不显示标题之间的连接线

详解Angular结合zTree异步加载节点数据

3.1.2 编程步骤

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

setting = {
 data: {
 simpleData: {
 enable: true
 }
 },
 view: {
 showLine: false
 }
 };

3.2 不显示节点图标

3.2.1 官方文档

去掉节点前面的图标

详解Angular结合zTree异步加载节点数据

3.2.2 编程步骤

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

详解Angular结合zTree异步加载节点数据

setting = {
 data: {
 simpleData: {
 enable: true
 }
 },
 view: {
 showLine: false,
 showIcon: false
 }
 };
View Code

3.3 自定义节点图标

3.3.1 官方文档

更改节点的图标

详解Angular结合zTree异步加载节点数据

3.3.2 编程步骤

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

详解Angular结合zTree异步加载节点数据

3.4 自定义字体

3.4.1 官方文档

更改节点字体的样式

详解Angular结合zTree异步加载节点数据

3.4.2 编程步骤

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

详解Angular结合zTree异步加载节点数据

3.4.3 效果展示

详解Angular结合zTree异步加载节点数据

3.5 超链接

3.5.1 官方文档

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

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

详解Angular结合zTree异步加载节点数据

3.5.2 编程步骤

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

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

技巧02：设置target属性时，属性值有 _blank 和 _self

_blank -> 用一个新窗口打开

_self -> 在原来的窗口打开

详解Angular结合zTree异步加载节点数据

zNodes = [
 {id: 1, pId: 0, name: '1 一级标题', open: true, iconOpen:"assets/zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"assets/zTree/css/zTreeStyle/img/diy/1_close.png"},
 {id: 11, pId: 1, name: '1.1 二级标题', open: true, font:{'background-color':'skyblue', 'color':'white'}},
 {id: 111, pId: 11, name: '1.1.1 三级标题 -> 博客园1', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_blank'},
 {id: 113, pId: 11, name: '1.1.1 三级标题 -> 博客园2', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_self'},
 {id: 112, pId: 11, name: '1.1.2 三级标题 -> 单击', click: "alert('你单击了')"},
 {id: 12, pId: 1, name: '1.2 二级标题'},
 {id: 2, pId: 0, name: '2 一级标题'}
 ]
View Code

3.6 单击控制

3.6.1 官方文档

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

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

详解Angular结合zTree异步加载节点数据

3.6.2 编程步骤

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

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

详解Angular结合zTree异步加载节点数据

setting = {
 view: {
 showLine: true,
 showIcon: true,
 fontCss: this.getFont
 },
 data: {
 simpleData: {
 enable: true,
 idKey: 'id',
 pIdKey: 'pId'
 }
 },
 callback: {
 onClick: this.onCzTreeOnClick
 }
 };
View Code

编写onClick触发方法

详解Angular结合zTree异步加载节点数据

onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
 alert(treeNode.name);
 }
View Code

3.6.3 代码汇总

import { Component, OnInit } from '@angular/core';
declare var $ : any;
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
 setting = {
 view: {
 showLine: true,
 showIcon: true,
 fontCss: this.getFont
 },
 data: {
 simpleData: {
 enable: true,
 idKey: 'id',
 pIdKey: 'pId'
 }
 },
 callback: {
 onClick: this.onCzTreeOnClick
 },
 // async: {
 // enable: true,
 // url:"http://localhost:3000/data",
 // type: "get",
 // // autoParam:["id", "name=n", "level=lv"],
 // // otherParam:{"otherParam":"zTreeAsyncTest"},
 // dataFilter: this.filter
 // }
 };
 zNodes = [
 {id: 1, pId: 0, name: '1 一级标题', open: true, iconOpen:"assets/zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"assets/zTree/css/zTreeStyle/img/diy/1_close.png"},
 {id: 11, pId: 1, name: '1.1 二级标题', open: true, font:{'background-color':'skyblue', 'color':'white'}},
 {id: 111, pId: 11, name: '1.1.1 三级标题 -> 博客园1', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_blank'},
 {id: 113, pId: 11, name: '1.1.1 三级标题 -> 博客园2', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_self'},
 {id: 112, pId: 11, name: '1.1.2 三级标题 -> 单击', click: "alert('你单击了')"},
 {id: 12, pId: 1, name: '1.2 二级标题'},
 {id: 2, pId: 0, name: '2 一级标题'}
 ]
 getFont(treeId, node) {
 return node.font ? node.font : {};
 }
 // filter(treeId, parentNode,responseData) {
 // console.log(responseData);
 // if (responseData) {
 // for(var i =0; i < responseData.length; i++) {
 // responseData[i].name += "动态节点数据" + responseData[i].id;
 // }
 // }
 // return responseData;
 // }
 onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
 alert(treeNode.name);
 } 
 constructor() { } 
 ngOnInit() { 
 console.log('打印输出jquery对象');
 console.log($);
 console.log('但因输出zTree对象');
 console.log($.fn.zTree);
 $.fn.zTree.init($("#ztree"),this.setting,this.zNodes);
 // $.fn.zTree.init($("#ztree"),this.setting);
 }
}
View Code

3.7 异步加载节点数据

3.7.1 官方文档

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

详解Angular结合zTree异步加载节点数据

3.7.2 编程步骤

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

详解Angular结合zTree异步加载节点数据

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

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

[
 {
 "id": 1,
 "pId": 0,
 "name": "1 one"
 },
 {
 "id": 2,
 "pId": 0,
 "name": "2 two"
 }
 ]

技巧02：三少偷懒，是利用json-server模拟的后台数据，哈哈；json-server

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

详解Angular结合zTree异步加载节点数据

setting = {
 view: {
 showLine: true,
 showIcon: true,
 fontCss: this.getFont
 },
 data: {
 simpleData: {
 enable: true,
 idKey: 'id',
 pIdKey: 'pId'
 }
 },
 callback: {
 onClick: this.onCzTreeOnClick
 },
 async: {
 enable: true,
 url:"http://localhost:3000/data",
 type: "get",
 // autoParam:["id", "name=n", "level=lv"],
 // otherParam:{"otherParam":"zTreeAsyncTest"},
 dataFilter: this.filter
 }
 };
View Code

> 编写响应数据处理方法

详解Angular结合zTree异步加载节点数据

filter(treeId, parentNode,responseData) {
 console.log(responseData);
 if (responseData) {
 for(var i =0; i < responseData.length; i++) {
 responseData[i].name += "动态节点数据" + responseData[i].id;
 }
 }
 return responseData;
 }
View Code

3.7.3 代码总汇

{
 "data": 
 [
 {
 "id": 1,
 "pId": 0,
 "name": "1 one"
 },
 {
 "id": 11,
 "pId": 1,
 "name": "1.1 oneToOne"
 },
 {
 "id": 12,
 "pId": 1,
 "name": "1.2 oneToTwo"
 },
 {
 "id": 2,
 "pId": 0,
 "name": "2 two"
 }
 ]
}
模拟后台响应数据
<ul class="ztree"><ul></ul>
HTML
import { Component, OnInit } from '@angular/core';
declare var $ : any;

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

 setting = {
 view: {
 showLine: true,
 showIcon: true,
 fontCss: this.getFont
 },
 data: {
 simpleData: {
 enable: true,
 idKey: 'id',
 pIdKey: 'pId'
 }
 },
 callback: {
 onClick: this.onCzTreeOnClick
 },
 async: {
 enable: true,
 url:"http://localhost:3000/data",
 type: "get",
 // autoParam:["id", "name=n", "level=lv"],
 // otherParam:{"otherParam":"zTreeAsyncTest"},
 dataFilter: this.filter
 }
 };

 // zNodes = [
 // {id: 1, pId: 0, name: '1 一级标题', open: true, iconOpen:"assets/zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"assets/zTree/css/zTreeStyle/img/diy/1_close.png"},
 // {id: 11, pId: 1, name: '1.1 二级标题', open: true, font:{'background-color':'skyblue', 'color':'white'}},
 // {id: 111, pId: 11, name: '1.1.1 三级标题 -> 博客园1', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_blank'},
 // {id: 113, pId: 11, name: '1.1.1 三级标题 -> 博客园2', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_self'},
 // {id: 112, pId: 11, name: '1.1.2 三级标题 -> 单击', click: "alert('你单击了')"},
 // {id: 12, pId: 1, name: '1.2 二级标题'},
 // {id: 2, pId: 0, name: '2 一级标题'}
 // ]

 getFont(treeId, node) {
 return node.font ? node.font : {};
 }

 filter(treeId, parentNode,responseData) {
 console.log(responseData);
 if (responseData) {
 for(var i =0; i < responseData.length; i++) {
 responseData[i].name += "动态节点数据" + responseData[i].id;
 }
 }
 return responseData;
 }

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

 constructor() { }
 
 ngOnInit() { 
 console.log('打印输出jquery对象');
 console.log($);
 console.log('但因输出zTree对象');
 console.log($.fn.zTree);
 // $.fn.zTree.init($("#ztree"),this.setting,this.zNodes);
 $.fn.zTree.init($("#ztree"),this.setting);
 }
}
TS

3.7.4 效果展示

详解Angular结合zTree异步加载节点数据

详解Angular结合zTree异步加载节点数据

- Author -

NeverCtrl_C

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
javascript转换静态图片，增加粒子动画效果
May 28 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
详解vue表单——小白速看
Apr 08 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
javascript数组拍平方法总结
Jan 20 #Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 #Javascript
详解Node.js模板引擎Jade入门
Jan 19 #Javascript
JS实现碰撞检测的方法分析
Jan 19 #Javascript
angular1配合gulp和bower的使用教程
Jan 19 #Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 #Javascript
Angular实现搜索框及价格上下限功能
Jan 19 #Javascript
输入法(2) Sunmao(1) 蓝屏(1) CAD(1) 滚动条(1) 403(1) Sentry(1) sout(1) 404(1) svg(1)
You might like
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
Php图像处理类代码分享
2012/01/19 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
javascript常用的设计模式
2017/02/09 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
javascript 数据存储的常用函数总结
2017/06/01 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
vue初始化动画加载的实例
2018/09/01 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
python 实现有道翻译功能
2021/02/26 Python
IRO美国官网：法国服装品牌
2018/03/06 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
应届生煤化工求职信
2013/10/21 职场文书
规划编制实施方案
2014/03/15 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
档案工作个人总结
2015/03/03 职场文书
财务会计求职信范文
2015/03/20 职场文书
超市收银员岗位职责
2015/04/07 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
Spring Boot 实现 WebSocket
2022/04/30 Java/Android