首页
所有分类
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 相关文章推荐
jquery 3D球状导航的文章分类
Jul 06 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
详解js跨域请求的两种方式，支持post请求
May 05 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
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
死锁(3) 限流器(1) 生命周期(1) 异步机制(1) reduce()(1) 逻辑备份(1) 轮询锁(1) 远程连接(2) springCloud(6) 信号同步(1)
You might like
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
python中列表和元组的区别
2017/12/18 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python实现教务管理系统
2018/03/12 Python
Python for i in range ()用法详解
2020/09/18 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
通过实例解析Python return运行原理
2020/03/04 Python
Eagle Eyes Optics鹰眼光学：高性能太阳镜
2018/12/07 全球购物
帕克纽约：PARKER NY
2018/12/09 全球购物
社区服务活动小结
2014/07/08 职场文书
财务稽核岗位职责
2015/04/13 职场文书
学术研讨会主持词
2015/07/04 职场文书
人民调解协议书
2016/03/21 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python