首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Angular整合zTree的示例代码

Posted in Javascript onJanuary 24, 2018

1 前提准备

1.1 新建一个angular4项目

参考博文：点击前往

Angular整合zTree的示例代码

1.2 去zTree官网下载zTree

zTree官网： 点击前往

Angular整合zTree的示例代码

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>

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);
 }
}

2.4 在组件HTML中编写代码

<ul id="ztree" 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
  }
 };

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="..." 的内容。 如果操作较复杂，请使用 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 一级标题'}
 ]

3.6 单击控制

3.6.1 官方文档

点击节点标题时触发相应的方法

技巧01： 在angular中可以利用这个用法来实现路由跳转

Angular整合zTree的示例代码

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
  }
 };

Angular整合zTree的示例代码

编写onClick触发方法

onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
  alert(treeNode.name);
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Angular整合zTree的示例代码

- Author -

NeverCtrl_C

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 字符串乘法
Aug 20 Javascript
JavaScript 图片预览效果 推荐
Dec 22 Javascript
javascript转换字符串为dom对象（字符串动态创建dom）
May 10 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 #Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 #Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 #Javascript
简述vue中的config配置
Jan 23 #Javascript
JS实现多物体运动的方法详解
Jan 23 #Javascript
JS运动改变单物体透明度的方法分析
Jan 23 #Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 #Javascript
Windows server 2003(1) sock(2) csgo(1) ACID(1) sentinel(1) Stater(1) mysqldump(1) minio(1) XPathParser(1) protocol(1)
You might like
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
javascript radio 联动效果
2009/03/04 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
js获取url页面id，也就是最后的数字文件名
2020/09/25 Javascript
[03:44]2014DOTA2国际邀请赛 71专访：DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
在Python中处理XML的教程
2015/04/29 Python
浅述python中深浅拷贝原理
2018/09/18 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
远程部署工具Fabric详解（支持Python3）
2019/07/04 Python
用Python实现BP神经网络（附代码）
2019/07/10 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python如何导入依赖包
2020/07/13 Python
python super()函数的基本使用
2020/09/10 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
广播节目策划方案
2014/05/23 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
毕业证明模板
2015/06/19 职场文书
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android