Angular16 Angular整合zTree、异步加载节点数据
1 前提准备
1.1 新建一个angular4项目
参考博文:点击前往
1.2 去zTree官网下载zTree
zTree官网:点击前往
三少使用的版本:点击前往
1.3 参考博客
点击前往01 点击前往02
2 编程步骤
从打印出zTree对象可以看出,zTree对象利用init方法来实现zTree结构;init方法接收三个参数
参数1:一个ul标签的DOM节点对象
参数2:基本配置对象
参数3:标题信息数组
2.1 在index.html中引入相关js、css
<!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>TestZtree</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link rel="stylesheet" type="text/css" href="./assets/zTree/css/zTreeStyle/zTreeStyle.css"><link rel="stylesheet" type="text/css" href="./assets/zTree/css/demo.css"><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文件中编写代码
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 id="ztree" class="ztree"><ul></ul>
2.5 效果展示
3 zTree基本功能
3.1 不显示连接线
3.1.1 官方文档
不显示标题之间的连接线
3.1.2 编程步骤
在基本配置对象中指定showLine属性的值为false即可
setting = {data: {simpleData: {enable: true}},view: {showLine: false}};
3.2 不显示节点图标
3.2.1 官方文档
去掉节点前面的图标
3.2.2 编程步骤
将基本配置对象的showIcon属性设为false即可
setting = {data: {simpleData: {enable: true}},view: {showLine: false,showIcon: false}};
View Code
3.3 自定义节点图标
3.3.1 官方文档
更改节点的图标
3.3.2 编程步骤
为treeNode节点数据设置icon/iconOpen/iconClose属性即可
3.4 自定义字体
3.4.1 官方文档
更改节点字体的样式
3.4.2 编程步骤
为treeNode节点数据设置font属性即可,font属性的值是一个对象,该对象的内容和style的数据一样
3.4.3 效果展示
3.5 超链接
3.5.1 官方文档
点击节点标题就会自动跳转到对应的url
注意01:click属性只能进行最简单的 click 事件操作。相当于 οnclick="..." 的内容。 如果操作较复杂,请使用 onClick 事件回调函数。
3.5.2 编程步骤
为treeNode节点数据设置url、click属性即可
技巧01:设置click属性时,属性值必须是一些简单的onClick事件
技巧02:设置target属性时,属性值有 _blank 和 _self
_blank -> 用一个新窗口打开
_self -> 在原来的窗口打开
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中可以利用这个用法来实现路由跳转
3.6.2 编程步骤
设置基本配置对象的onClick属性
技巧01:onClick属性值是一个方法的引用,我们需要自己编写这个方法
setting = {view: {showLine: true,showIcon: true,fontCss: this.getFont},data: {simpleData: {enable: true,idKey: 'id',pIdKey: 'pId'}},callback: {onClick: this.onCzTreeOnClick}};
View Code
编写onClick触发方法
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 官方文档
节点的数据是从后台进行获取的
3.7.2 编程步骤
技巧01:异步加载节点数据时init方法不用传递第三个参数
> 准备一个后台用于返回JSON格式的数据
技巧01:返回的JSON数据是一个列表,格式为
[{"id": 1,"pId": 0,"name": "1 one"},{"id": 2,"pId": 0,"name": "2 two"}]
技巧02:三少偷懒,是利用json-server模拟的后台数据,哈哈;json-server 使用教程请参见 -> 点击前往
> 设置基本配置对象的async属性
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
> 编写响应数据处理方法
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 id="ztree" 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 效果展示
3.7.5 参考博文
点击前往
转载于:https://www.cnblogs.com/NeverCtrl-C/p/8318909.html
Angular16 Angular整合zTree、异步加载节点数据相关推荐
- 使用ztree异步加载数据库数据形成树形菜单
-搞了好久好久,在此记录一下这个这个胜利的时刻!!!!作为一个合格的程序员,任重而道远啊- 项目环境:thinkphp5+mysql+ztree 项目目标:从MySQL数据库获取小区用户位置信息.用户 ...
- ztree java 异步_使用 zTree 异步加载
使用 zTree 异步加载 使用场景 可能需要展示类别很多,如果采用直接加载的方式,需要展示的数据量过大,交互十分不友好.所以采用 zTree 异步加载数据. demo 环境 SpringBoot 1 ...
- zTree 异步加载
前几天一直在研究zTree 怎么实现异步加载,看了很多文章头也是蒙蒙的,现在自己来总结一下,在这里先解释一下所谓的异步加载.异步加载就是数据没有一次性全部加载出来,当用户点击父节点上的"+& ...
- php ztree异步加载数据格式,zTree异步加载简单demo
这几天花了些时间,试了试zTree自带的异步加载方式 还不错. 有个奇怪的问题: 无论我在服务器设置 setContentType("text/plain;charset=UTF-8&quo ...
- Android 应用开发 之通过AsyncTask与ThreadPool(线程池)两种方式异步加载大量数据的分析与对比
Android 应用开发 之通过AsyncTask与ThreadPool(线程池)两种方式异步加载大量数据的分析与对比 标签: AndroidAsyncTaskThreadPool异步加载view 2 ...
- WinForm使用多线程异步加载界面数据
WinForm使用多线程异步加载界面数据 处于学习阶段,做个记录,如有写错,请多多指教. private void FrmQC111_Load(object sender, EventArgs e) ...
- zTree 异步加载 添加子节点重复问题 .
最近写程序需要一颗可以一步加载的树,发现ztree功能很强大.搞了好久才知道怎么实现树节点的异步加载, 在这里记录下来以方便以后自己忘记了.代码如下: <spanstyle="font ...
- ztree异步加载数据amp;amp;amp;amp;amp;amp;amp;amp;给父节点动态追加子节点
对于ztree,整了两天了,在数据库中查出json符合格式的数据,这很好整,但是在ztree追加时出现重复节点,找了半天资源,最终还是用ztree自带的异步加载解决问题,特此记录一下下!!如果不足请指 ...
- Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...
最新文章
- 【青少年编程】【二级】寻找宝石
- ros 消息队列与缓冲区_Spring Boot消息队列系统:RocketMQ初入门
- 聚类(序)——监督学习与无监督学习
- php7 redis长连接,php使用redis长连接有哪些步骤
- PHP内核探索:新垃圾回收机制说明
- C#设计模式之23-访问者模式
- JS 前端排序 数组指定项移动到最后
- (3)二分频systemverilog与VHDL编码
- java教师考勤系统,javaweb课堂考勤管理系统
- VBS表白代码以及一些注意事项
- python 绘制中国地图并利用经纬度标注散点
- stm32f407工程改为stm32f401的方法,并修改时钟
- python3贴吧_python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)...
- 基于springboot的4s店车辆管理系统-计算机毕业设计(源码+数据库+Lw文档)
- Python——爬取喜马拉雅音频(抖音最火翻唱)
- IAR下载程序只有提示音,没有任何反应。或报错The configuration does not have debuggable output.(A debug-only project shoul
- WXpython下载很慢安装包教程,直接安装不上,只好把所有包下载下来
- 通过线程八锁问题融会贯通synchronized关键字的使用
- 计算机考证打字训练题
- 计算机控制系统第二章答案,计算机控制系统习题参考答案--第2章
热门文章
- 关于SAP Fiori Smart Template开发的一些实际例子
- SAP Cloud for Customer Extensibility的设计与实现
- C4C和CRM里获取当前登录用户分配的Organization Unit信息
- ABAP, Java和JavaScript三种语言的比较
- python中soup_python – 使用带有UTF-8的soup.get_text()
- 安装Loadrunner11及破解步骤
- 华为鸿蒙系统不卡,华为鸿蒙系统,到底能不能取代安卓?网友:细节决定成败...
- 盗贼之海3月22服务器维护,盗贼之海3月29日更新公告_3月29日更新了什么_52pk单机游戏...
- mac运行python速度慢_python-3.x – Pygame简单循环在Mac上运行得非常慢
- python 爬虫 标签文本beautifullsoup_【Python爬虫】学习BeautifulSoup