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 对象
显示结果
