zTree 学习笔记之(一)
zTree 学习笔记之(一)
简介
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
到底有哪些具体的优点,可以参见官网http://www.treejs.cn/v3/main.php#_zTreeInfo
文件准备
1、下载JQuery 文件包,下载地址:http://jquery.com/
2、下载JQuery zTree v3.0.zip(或更高的版本) ,下载地址:https://github.com/zTree/zTree_v3
将需要使用的 zTree v3.x 相关的js、css、img文件分别放置到相应目录,并且在HTML文件中引用时保证相对路径正确。
同时可以引用jquery.min.js bootstrap.min.js bootstrap.min.css最后一个是可选的,一般是结合bootstrap使用的,可以使得界面比较美观。
开始上路
1、 第一次按照以下代码,制作HTML页面。
1) "<!DOCTYPE html>" 是必需的!
2) zTree 的容器 className
只能设置为 "ztree",不能更改(可以更改,但是同时zTreeStyle.css内的ztree名字也要相应的更改,必须保持一致),即class = “ztree”。
3) 入门成功后,就可以按照顺序去看 Demo 了,直接看看源码。
2、
根据官网入门的HTML:以下是自己边学边查写的静态页面代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>zTree 学习案例</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script> <script language="JavaScript" type="text/javascript">
var setting = {
view: {
dblClickExpand: false, //双击节点时,是否自动展开父节点的标识
expandSpeed: 10 //设置树展开的动画速度 三种预定速度之一的字符串("slow", "normal", "fast"),也可以是 表示动画时长的毫秒数值 (如:1000)
}, data:{ // 必须使用data,这是setting格式要求
simpleData : {
enable : true, //确定 zTree 初始化时的各种数据是否采用简单数据模式 (Array)
idKey : "id", //id编号命名,节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
pIdKey : "pId", //父id编号命名,节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
rootPId : 0
}
}, // 回调函数
callback : { //callback 里面注册有各种回调函数,用来处理不同的事件。例如下面三例子
onClick : function(event, treeId, treeNode, clickFlag) { //用于捕获节点被点击的事件回调函数
var zTree = $.fn.zTree.getZTreeObj("tree"); //zTree v3.x 专门提供的根据 treeId 获取 zTree 对象的方法
zTree.expandNode(treeNode);
}, onAsyncSuccess : function(event, treeId, treeNode, msg){ //用于捕获异步加载正常结束的事件回调函数
}, onAsyncError : function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){ //用于捕获异步加载出现异常错误的事件回调函数
}
}
}; var zNodes = [
{name:"test1", open:true, children:
[{name:"test1_1",children:
[{name:"test232_1"}, {name:"test232_2"}]},
{name:"test1_2"}]},
{name:"test2", open:true, children:
[{name:"test2_1"}, {name:"test2_2"}]}
]; $(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
});
</script>
</head>
<body>
<div>
<!—这里的 ul 的class名字一定要是ztree,不能更改-->
<ul id="tree" class="ztree"></ul>
</div>
</body>
</html>
注记:var setting是zTree配置项,。里面包括async(主要用于异步加载数据时配置,比如url,type等);callback(内部注册有各种回调函数,用来处理不同的事件);check(主要用于设置节点前面是否有复选框);data(主要用于设置数据的显示的格式);edit(主要用于设置树节点编辑时的各参数,如enable:设置 zTree 是否处于编辑状态);view(主要用于设置界面显示动画各参数,比如expandSpeed:用于设置节点展开、折叠时的动画速度)
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
});
zTree 初始化方法,创建 zTree 必须使用此方法
1、需要首先加载 jquery-1.4.2.js 或其他更高版本的 jQuery 。
2、需要加载 jquery-ztree.core-3.0.js,如果需要用到 编辑功能 或 checkbox / radio 还需要分别加载 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js 。
3、需要加载 zTreeStyle.css 以及 zTreeStyle 目录下的 img 文件。
5、注意设置 zTree 的容器样式 class="ztree",其中 "ztree" 这个 className,可以根据需要随意修改,别忘了修改 css 中对应名字就是,对于容器如果需要增加其他特殊样式,可根据自己的需要进行修改。
参数说明:$.fn.zTree.init($("#tree"), setting, zNodes)
Obj (jQuery Object) 用于展现 zTree 的 DOM 容器
zSetting (JSON) zTree 的配置数据,具体设置“setting 配置详解”中的各个属性说明
zNodes Array(JSON) / JSON
zTree 的节点数据,具体参考 “treeNode 节点数据详解”中的各个属性说明
1、v3.x 支持单独添加一个节点,即如果只新增一个节点,不用必须包在数组中
2、如果需要异步加载根节点,可以设置为 null 或 [ ]
3、使用简单数据模式,参考 setting.data.simpleData 内的属性说明
返回值JSON
zTree 对象,提供操作 zTree 的各种方法,对于通过 js 操作 zTree 来说必须通过此对象
如果不需要自行设定全局变量保存,可以利用 $.fn.zTree.getZTreeObj方法随时获取zTree 对象
显示结果
zTree 学习笔记之(一)的更多相关文章
- ztree学习笔记(一)
在项目当中,经常会用到ztree树形插件,之前做的几个项目当中都用到了这个插件,感觉功能还是很强大的,而且在网上还找到了中文的API,因为项目中的树形结构不是自己做的,所以现在从头学习一下,并且记录一 ...
- z-tree学习笔记
做项目时,需要用到带复选框的tree.经比较后优选了ztree,功能强大,文档清晰. http://www.treejs.cn/v3/api.php 直接上代码吧. 1.下载ztree后.将里面需要用 ...
- zTree学习笔记
一.zTree的下载 官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 解压后的目录结构为: 二.zTree入门案例 2.1 在页面中引入相关文件 要使用z ...
- [译]聊聊C#中的泛型的使用(新手勿入) Seaching TreeVIew WPF 可编辑树Ztree的使用(包括对后台数据库的增删改查) 字段和属性的区别 C# 遍历Dictionary并修改其中的Value 学习笔记——异步 程序员常说的「哈希表」是个什么鬼?
[译]聊聊C#中的泛型的使用(新手勿入) 写在前面 今天忙里偷闲在浏览外文的时候看到一篇讲C#中泛型的使用的文章,因此加上本人的理解以及四级没过的英语水平斗胆给大伙进行了翻译,当然在翻译的过程中发 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
随机推荐
- ASP.NET MVC 下拉列表实现
https://blog.csdn.net/Ryan_laojiang/article/details/75349555?locationNum=10&fps=1 前言 我们今天开始好好讲讲关 ...
- Q312 戳气球
有 n 个气球,编号为0 到 n-1,每个气球上都标有一个数字,这些数字存在数组 nums 中. 现在要求你戳破所有的气球.每当你戳破一个气球 i 时,你可以获得 nums[left] * nums[ ...
- (Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议 (图)
(Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议! 新闻采集器做好了,前端展示APP界面感觉还不是很好,还需要改进改进,希望发布(Android和IOS版本)前听听大家的建 ...
- MySQL Migration Tool报“initialized java loader”错误的问题
MySQL Migration Tool报“initialized java loader”错误的问题 运行MySQL Migration Tool时经常会提示“An error occured ...
- solr实时更新mysql数据的方法
第一步:创建core core是solr的特有概念,每个core是一个查询数据,.索引等的集合体,你可以把它想象成一个独立数据库,我们创建一个新core:名字[core1] 进入linux命令行,进入 ...
- 安装win7 64位和win10 64位双系统小结
1.gpt比mbr更先进.与主启动记录 (MBR) 分区方法相比,GPT 具有更多的优点,因为它允许每个磁盘有多达 128 个分区(mbr只支持4个分区),支持高达 18 千兆兆字节的卷大小,允许将主 ...
- WPF 使用附加属性增加控件属性
使用附加属性增加控件属性,使得这个附加属性在使用的时候没有局限性,可以在任何的控件中使用它来增加所需要的属性,使得控件的属性使用起来非常灵活 一.自定义附加属性 using System; using ...
- System.Transactions事务超时设置
System.Transactions 有2个超时属性(timeout 与 maxTimeout),可以通过配置文件来进行设置. 1. timeout System.Transactions 默认的t ...
- vue之生命周期的一点总结
vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 一.vue实例的生命周期(vue2.0) 二.生命周期描述:(参考截图) 三.例子 window.vm = ...
- JAVA练手--集合
集合框架体系如图所示 Collections:是一个工具类java.util.Collections(可以使用它对集合对象进行操作) Collection:除了map(键值对)其他集合的父类 1. S ...