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

000

1 前提准备

1.1 新建一个angular4项目

参考：https://www.freexyz.cn/article/119668.htm

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

1.2 去zTree官网下载zTree

zTree官网：点击前往

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

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

1.3 参考博客

https://www.freexyz.cn/article/133284.htm

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异步加载节点数据

© 版权声明
版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
JavaScript
# 编程开发# JavaScript
喜欢就支持一下吧
点赞0 分享
网络的头像-偶像资源网
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
22天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
22天前 28
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checke...
26天前 4
jQuery实现滚动效果-偶像资源网
jQuery实现滚动效果
jQuery实现滚动效果
23天前 3
PHP队列原理及基于队列的写文件案例-偶像资源网
PHP队列原理及基于队列的写文件案例
PHP队列原理及基于队列的写文件案例
23天前 2
css文本两端对齐的实现代码-偶像资源网
css文本两端对齐的实现代码
css文本两端对齐的实现代码
26天前 2
相关推荐
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
22天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
22天前 28
吊打全网所有精美导航页引导页HTML源码-偶像资源网
吊打全网所有精美导航页引导页HTML源码
吊打全网所有精美导航页引导页HTML源码
26天前 24
css的基本选择器有哪些？-偶像资源网
css的基本选择器有哪些？
css的基本选择器有哪些？
27天前 23
5.9K⭐ 轻松搞定定时任务！Web管理超便捷-偶像资源网
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
26天前 23
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
26天前 4
评论 抢沙发

请登录后发表评论

    暂无评论内容