今天学习了zTree插件，记录一下使用步骤：

1 下载，把下载好的目录整个放在项目中

文件夹目录：

js：一般引这jquery.ztree.all.js和jquery.ztree.core.js

css:：用zTreeStyle里面的zTreeStyle.css

demo：示例：可以右键--查看框架信息，可以看到网址，再打开相应的文件，查看代码

api：帮助文档

2

1）引入css，引入jquery，引入zTree.js

2）加一个结构代码

<div id="treeDemo" class="ztree"></div>，注意id和class必须有。

3）然后从demo中把js拷贝下来

4）主要修改setting配置 和 Znodes 数据

3 一般使用“简单json”这种数据格式，

数据是从是数据库中得到的，是一个二维数组，

可以用for循环把数据添加到ztree的数据节点中（代码在最后）

其他可以查看api中的“treeNode 节点数据详解”

5 setting 配置详解

回调函数举例：

onclick，有三个参数比较重要：

总体示例：

代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>z-tree</title>

		<link rel="stylesheet" href="../../lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" />

		<script src="../../lib/jquery-3.2.1.min.js"></script>

		<script src="../../lib/zTree_v3/js/jquery.ztree.all.js"></script>

		<script>

		var setting = {

			data: {

				simpleData: {

					enable: true

				}

			},

			callback: { //回调函数

				onClick: zTreeOnClick

			}

		};

		//点击时弹出id和名称

		function zTreeOnClick(event, treeId, treeNode){

			console.log(treeNode.id+treeNode.name);

		}

		//原始数据

		var arr=[

			[1,'山东',0],

			[2,'辽宁',0],

			[3,'江苏',0],

			[11,'淄博',1],

			[21,'大连',2],

			[31,'南京',3],

			[111,'张店',11],

		];

		//z-tree数据

		var zNodes=[];

		//把原始数据放入z-tree数据中（是一个json）

		for(var i=0; i<arr.length; i++){

			zNodes.push({

				id:arr[i][0],

				name:arr[i][1],

				pId:arr[i][2]

			})

		}

		$(document).ready(function(){

			$.fn.zTree.init($("#treeDemo"), setting, zNodes);

		});

	</script>

	</head>

	<body>

		<div id="treeDemo" class="ztree"></div>

	</body>

</html>

效果：

可以在控制台查看点击时的效果

总结：ztree的使用还比较简单，api不大容易看，直接看demo示例就可以，遇到相应功能，直接拷贝就行。插件这种东西还是重在理解，不需要在意写法，都是规定好的，就是拿过来直接用。所以，还是要实际项目中，有机会用一遍，才能发现问题。

zTree的重点的更多相关文章

  1. JAVAEE——BOS物流项目02：学习计划、动态添加选项卡、ztree、项目底层代码构建

    1 学习计划 1.jQuery easyUI中动态添加选项卡 2.jquery ztree插件使用 n 下载ztree n 基于标准json数据构造ztree n 基于简单json数据构造ztree( ...

  2. 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh（复习） 4、 SpringData-JPA持久层入门案例（重点） 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用

    1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...

  3. 项目一:第一天 1、项目概述 2、环境搭建（重点） 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

    1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf'   ...

  4. zTree的使用教程

    1.首先去官网下载http://www.ztree.me/v3/main.php#_zTreeInfo 2.之后引入: <script src="js/jquery.ztree.all ...

  5. zTree第三章，异步加载，前端

    zTree异步加载 ---------------------------------------------------------------------------------- 具体详见API ...

  6. [译]聊聊C＃中的泛型的使用（新手勿入） Seaching TreeVIew WPF 可编辑树Ztree的使用（包括对后台数据库的增删改查） 字段和属性的区别 C# 遍历Dictionary并修改其中的Value 学习笔记——异步 程序员常说的「哈希表」是个什么鬼？

    [译]聊聊C#中的泛型的使用(新手勿入)   写在前面 今天忙里偷闲在浏览外文的时候看到一篇讲C#中泛型的使用的文章,因此加上本人的理解以及四级没过的英语水平斗胆给大伙进行了翻译,当然在翻译的过程中发 ...

  7. zTree学习笔记

    一.zTree的下载 官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 解压后的目录结构为: 二.zTree入门案例 2.1 在页面中引入相关文件 要使用z ...

  8. 输入框点击下滑Ztree菜单

    记录一个功能实现代码,我这边前端用的是layui,需要实现的效果如下: 需求:当点击选择地区的时候会出现如上图的下拉菜单. 分析:首先肯定给这个输入框加监听,click方法,然后将ztree的div显 ...

  9. 一个简单便捷的树形显示Ztree

    这是本人在闲时研究的一个用于显示树形列表的小玩意. zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 下面就说说怎么用吧 ...

随机推荐

  1. MongoDB中的一些坑（最好不要用）

    MongoDB 是目前炙手可热的 NoSQL 文档型数据库,它提供的一些特性很棒:如自动 failover 机制,自动 sharding,无模式 schemaless,大部分情况下性能也很棒.但是薄荷 ...

  2. C# Json库 和 xml 序列化反序列化 存在的问题

    json 正常情况下不会对私有成员进行序列化和反序列化, 因此在用json做深拷贝时, 就会丢失数据. 解决办法:       声明成公有成员. json在序列化和反序列化时, 如果类中有IComma ...

  3. HDU1875(最小生成树)

    畅通工程再续 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  4. requests模拟上传照片

    博客园相册管理中有上传照片的功能 现在通过requests库模拟上传图片功能 先手动上传图片,用Fiddler转包,查看到上传图片接口请求格式, ------WebKitFormBoundarySKZ ...

  5. Hadoop安装全教程 Ubuntu14.04+Java1.8.0+Hadoop2.7.6

    最近听了一个关于大数据的大牛的经验分享,在分享的最后大牛给我们一个他之前写好的关于大数据和地理应用demo.这个demo需要在Linux环境上搭建Hadoop平台.这次就简单的分享一下我关于在 Lin ...

  6. 用mapreduce实现从hbase导出到hdfs，实现一个工具类，能够支持任意表 任意列 任意路径导出，并且支持表头

    分析: 1.由于是任意列 任意表 任意路径,我们很容易想到是参数传入,参数传入后怎么去获得参数,根据我们以往的经验就是通过args[]来获取,但是在mapper或者是reducer中,我们不能直接将参 ...

  7. 面试总结hashmap

    考点: 1.hashing的概念 2.HashMap中解决碰撞的方法 3.equals()和hashCode()的应用,以及它们在HashMap中的重要性 4.不可变对象的好处 5.HashMap多线 ...

  8. MySQL数据库基础详解(非原创）

    文章大纲 一.数据库简介二.Mysql数据库简介三.Mysql安装与服务启动(Windows版本)四.Mysql图形化工具五.Mysql存储引擎精讲六.Mysql数据类型介绍七.Mysql主要专业名称 ...

  9. Go语言调度器之盗取goroutine(17)

    本文是<Go语言调度器源代码情景分析>系列的第17篇,也是第三章<Goroutine调度策略>的第2小节. 上一小节我们分析了从全局运行队列与工作线程的本地运行队列获取goro ...

  10. 352. Data Stream as Disjoint Intervals (TreeMap, lambda, heapq)

    Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers seen ...