首页
所有分类
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 OOP类与继承
Nov 15 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
浅谈JavaScript作用域
Dec 06 Javascript
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
vuex(1) axios(1) Storage(1) InputStream(1) Vue(10) 本地化存储(1) OutputStream(1) Set接口(1) persistedstate(1) HashSet集合(1)
You might like
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
php的闭包（Closure）匿名函数初探
2016/02/14 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
详解从angular-cli：1.0.0-beta.28.3升级到@angular/cli：1.0.0
2017/05/22 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
js module大战
2019/04/19 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
巴西最大的在线约会网站：ParPerfeito
2018/07/11 全球购物
加大码胸罩、内裤和服装：Just My Size
2019/03/21 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
解除合同协议书
2014/04/17 职场文书
北京奥运会口号
2014/06/21 职场文书
2014年班主任工作总结
2014/11/08 职场文书
公司员工安全协议书
2014/11/21 职场文书
Python制作春联的示例代码
2022/01/22 Python