首页
所有分类
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 相关文章推荐
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
express express-session的使用小结
Dec 12 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
微信小程序实现拍照和相册选取图片
May 09 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
JAVA(88) CompletableFuture(1) 计算器(5) 底部导航(1) 对齐打印(1) ForkJoin(1) FutureTask(3) Springboot-cli(1) 异步回调(1) format(1)
You might like
php中fsockopen用法实例
2015/01/05 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
分享别人写的一个小型js框架
2007/08/13 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
angularjs项目的页面跳转如何实现（5种方法）
2017/05/25 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
vue实现分页栏效果
2019/06/28 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
Python 基础教程之包和类的用法
2017/02/23 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
python安装requests库的实例代码
2019/06/25 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
django创建简单的页面响应实例教程
2019/09/06 Python
Python 生成器，迭代，yield关键字，send()传参给yield语句操作示例
2019/10/12 Python
Python 音频生成器的实现示例
2019/12/24 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
python 通过文件夹导入包的操作
2020/06/01 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
寻找完美的房车租赁：RVShare
2019/02/23 全球购物
英国高级健康和美容产品零售商：Life and Looks
2019/08/01 全球购物
adidas菲律宾官网：adidas PH
2020/02/07 全球购物
实习老师离校感言
2014/02/03 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
房产授权委托书范本
2014/09/22 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
Redis主从复制操作和配置详情
2022/09/23 Redis