Angular整合zTree的示例代码

2024-10-22 13:37:42

1 前提准备

1.1 新建一个angular4项目

参考博文：点击前往

1.2 去zTree官网下载zTree

zTree官网：点击前往

2 编程步骤

从打印出zTree对象可以看出，zTree对象利用init方法来实现zTree结构；init方法接收三个参数

参数1：一个ul标签的DOM节点对象

参数2：基本配置对象

参数3：标题信息数组

2.1 在index.html中引入相关js、css

<!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文件中编写代码

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 效果展示

3 zTree基本功能

3.1 不显示连接线

3.1.1 官方文档

不显示标题之间的连接线

3.1.2 编程步骤

在基本配置对象中指定showLine属性的值为false即可

 setting = {
  data: {
   simpleData: {
    enable: true
   }
  },
  view: {
   showLine: false
  }
 };

3.2 不显示节点图标

3.2.1 官方文档

去掉节点前面的图标

3.2.2 编程步骤

将基本配置对象的showIcon属性设为false即可

setting = {
  data: {
   simpleData: {
    enable: true
   }
  },
  view: {
   showLine: false,
   showIcon: false
  }
 };

3.3 自定义节点图标

3.3.1 官方文档

更改节点的图标

3.3.2 编程步骤

为treeNode节点数据设置icon/iconOpen/iconClose属性即可

3.4 自定义字体

3.4.1 官方文档

更改节点字体的样式

3.4.2 编程步骤

为treeNode节点数据设置font属性即可，font属性的值是一个对象，该对象的内容和style的数据一样

3.4.3 效果展示

3.5 超链接

3.5.1 官方文档

点击节点标题就会自动跳转到对应的url

注意01：click属性只能进行最简单的 click 事件操作。相当于 onclick="..." 的内容。如果操作较复杂，请使用 onClick 事件回调函数。

3.5.2 编程步骤

为treeNode节点数据设置url、click属性即可

技巧01：设置click属性时，属性值必须是一些简单的onClick事件

技巧02：设置target属性时，属性值有 _blank 和 _self

_blank -> 用一个新窗口打开

_self -> 在原来的窗口打开

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中可以利用这个用法来实现路由跳转

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

编写onClick触发方法

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

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

您可能感兴趣的文章:

在AngularJS中使用jQuery的zTree插件的方法
AngularJS实现树形结构(ztree)菜单示例代码
详解Angular结合zTree异步加载节点数据

在AngularJS中使用jQuery的zTree插件的方法

前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么. jQuery ZTree是国内非常不错的JQuery插件,功能齐全,文档和API也非常的友好,之前项目上常用此插件. AngularJS 功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于 directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能. 因此,花了一点时间
AngularJS实现树形结构(ztree)菜单示例代码

树形结构树形结构有多种形式和实现方式,zTree可以说得上是一种比较简洁又美观的且实现起来也相对简单.zTree是一个依靠jQuery实现的多功能"树插件".它最大的优点是配置灵活,只要id与pid的值相同就可形成一个简单的父子结构.再加上免费开源,使用zTree的人越来越多. 效果图如下首先你需要知道AngularJS的双向数据绑定是什么才可以更好的理解下面的代码,想了很久才想出用下面的代码来实现左侧菜单树形结构要实现上面的功能你需要操作如下步骤: 在HTML标签内添加ng-a
详解Angular结合zTree异步加载节点数据

1 前提准备 1.1 新建一个angular4项目参考://www.jb51.net/article/119668.htm 1.2 去zTree官网下载zTree zTree官网:点击前往三少使用的版本:点击前往 1.3 参考博客 //www.jb51.net/article/133284.htm 2 编程步骤从打印出zTree对象可以看出,zTree对象利用init方法来实现zTree结构:init方法接收三个参数参数1:一个ul标签的DOM节点对象参数2:基本配置对象参数3:标题
Angular整合zTree的示例代码

1 前提准备 1.1 新建一个angular4项目参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网: 点击前往 2 编程步骤从打印出zTree对象可以看出,zTree对象利用init方法来实现zTree结构:init方法接收三个参数参数1:一个ul标签的DOM节点对象参数2:基本配置对象参数3:标题信息数组 2.1 在index.html中引入相关js.css <!doctype html> <html lang="en">
highcharts 在angular中的使用示例代码

本文介绍了highcharts 在angular中的使用示例代码,分享给大家.具体如下: 网址 https://www.hcharts.cn/demo/highcharts https://github.com/pablojim/highcharts-ng 安装依赖 npm install highcharts-ng --save 引入依赖 'highcharts/highcharts.src.js', 'highcharts-ng/dist/highcharts-ng.min.js' 注入依赖
spring boot整合Swagger2的示例代码

Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服务器端的代码,允许API来始终保持同步.Swagger 让部署管理和使用功能强大的API从未如此简单. 1.代码示例 1).在pom.xml文件中引入Swagger2 <dependency> <groupId>io.springfox</groupId> <artifa
SpringBoot 整合 JMSTemplate的示例代码

1.1 添加依赖可以手动在 SpringBoot 项目添加依赖,也可以在项目创建时选择使用 ActiveMQ 5 自动添加依赖.高版本 SpringBoot (2.0 以上) 在添加 activemq 连接池依赖启动时会报 Error creating bean with name 'xxx': Unsatisfied dependency expressed through field 'jmsTemplate'; 可以将 activemq 连接池换成 jms 连接池解决. <depen
Springboot实现Shiro整合JWT的示例代码

写在前面之前想尝试把JWT和Shiro结合到一起,但是在网上查了些博客,也没太有看懂,所以就自己重新研究了一下Shiro的工作机制,然后自己想了个(傻逼)办法把JWT和Shiro整合到一起了另外接下来还会涉及到JWT相关的内容,我之前写过一篇博客,可以看这里:Springboot实现JWT认证 Shiro的Session机制由于我的方法是改变了Shiro的默认的Session机制,所以这里先简单讲一下Shiro的机制,简单了解Shiro是怎么确定每次访问的是哪个用户的 Servlet的Se
SpringBoot整合SpringDataRedis的示例代码

本文介绍下SpringBoot如何整合SpringDataRedis框架的,SpringDataRedis具体的内容在前面已经介绍过了,可自行参考. 1.创建项目添加依赖创建SpringBoot项目,并添加如下依赖: <dependencies>  <dependency> <groupId>org.springframework.boot</groupId> <artifactId
SpringBoot整合ShardingSphere的示例代码

目录一.相关依赖二.Nacos数据源配置三.项目配置四.验证概要: ShardingSphere是一套开源的分布式数据库中间件解决方案组成的生态圈,它由Sharding-JDBC.Sharding-Proxy和Sharding-Sidecar(计划中)这3款相互独立的产品组成. 他们均提供标准化的数据分片.分布式事务和数据库治理功能,可适用于如Java同构.异构语言.云原生等各种多样化的应用场景. 官网地址:https://shardingsphere.apache.org/ 一.相关
SpringBoot整合MyBatis-Plus的示例代码

目录前言源码环境开发工具 SQL脚本正文单工程 POM文件(注意) application.properties(注意) 自定义配置(注意) 实体类(注意) Mapper接口(注意) Service服务实现类(注意) Controller前端控制器(注意) SpringBoot启动类(注意) 启用项目,调用接口(注意) 多工程 commons工程-POM文件 MyBatis-Plus commons工程-system.properties commons工程- 自定义配置 commo
springboot 整合sentinel的示例代码

目录 1. 安装sentinel 2.客户端连接 1. 安装sentinel 下载地址:https://github.com/alibaba/Sentinel/releases/tag/1.7.0 ,由于我无法下载,所以使用docker安装, yuchunfang@yuchunfangdeMacBook-Pro ~ % docker pull bladex/sentinel-dashboard:1.7.0 yuchunfang@yuchunfangdeMacBook-Pro ~ % docker
springboot 整合hbase的示例代码

目录前言 HBase 定义 HBase 数据模型物理存储结构数据模型 1.Name Space 2.Region 3.Row 4.Column 5.Time Stamp 6.Cell 搭建步骤 1.官网下载安装包: 2.配置hadoop环境变量 3.修改 hbase-env.cmd配置文件 4.修改hbase-site.xml 文件 5.启动hbase服务 6.hbase客户端测试 Java API详细使用 1.导入客户端依赖 2.DDL相关操作 3.DML相关操作插入数据与查询数据 H

Angular整合zTree的示例代码

您可能感兴趣的文章:

相关推荐

随机推荐