首页
所有分类
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 相关文章推荐
JS 对象介绍
Jan 20 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
Bootstrap的popover（弹出框）2秒后定时消失的实现代码
Feb 27 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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
Hadoop(1) REGEXP(1) 控制流(1) 九宫格(5) 查询效率(1) group by(1) 表结构(1) delete in(1) 字段分割(1) Simhash(1)
You might like
php连接mysql数据库代码
2009/03/10 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
js实现随机点名程序
2020/09/17 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Django实现组合搜索的方法示例
2018/01/23 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
pycharm快捷键汇总
2020/02/14 Python
Python识别html主要文本框过程解析
2020/02/18 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
试述DBMS的主要功能
2016/11/13 面试题
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
函授毕业生自我鉴定范文
2014/03/25 职场文书
捐书倡议书
2014/08/29 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP