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