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

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

Javascript 相关文章推荐
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 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
You might like
php 301转向实现代码
2008/09/18 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
基于php权限分配的实现代码
2013/04/28 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
简单易懂的python环境安装教程
2017/07/13 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
竞选副班长演讲稿
2014/04/24 职场文书
运动会标语
2014/06/21 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers