首页
所有分类
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 13 Javascript
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
Bootstrap标签页（Tab）插件使用方法
Mar 21 Javascript
微信小程序 支付功能（前端）的实现
May 24 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 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
translation(2) 嵌套(1) decorator(1) 安卓(1) 二维数组(2) 循环(3) 网页解析(1) 装饰器(1) 分块(1) 查找算法(1)
You might like
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
python机器学习之神经网络实现
2018/10/13 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
python实现简单俄罗斯方块
2020/03/13 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
周年庆典邀请函范文
2014/01/24 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
员工安全生产承诺书
2014/05/22 职场文书
党的群众路线教育实践活动个人对照检查材料（企业）
2014/11/05 职场文书
公积金贷款承诺书
2015/04/30 职场文书