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 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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购物车实现代码
2011/10/10 PHP
基于php 随机数的深入理解
2013/06/05 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python中的字符串替换操作示例
2016/06/27 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
python装饰器实例大详解
2017/10/25 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python 实现一个计时器
2020/07/28 Python
Python的collections模块真的很好用
2021/03/01 Python
C#中的验证控件有几种
2014/03/08 面试题
校园奶茶店创业计划书
2014/01/23 职场文书
上班玩手机检讨书
2014/02/17 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
拉贝日记观后感
2015/06/05 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python