一直以来看见web项目中的树就头疼。这次又给碰上了，什么也别说，这次自己整理一个版本出来实践一下。
zTree v3.2的API界面非常清爽，但是在查看API之前，你需要自己先实践一下，知道基本的概念和约定的符号
怕毛线，直接来吧，首先简要介绍下zTree，只因为这个jQuery插件目前非常非常火，非常非常灵活，所以其他的
Tree插件我就 不去了解了，原理应该相通
zTree，是一个依靠jQuery的树插件，开源免费（开源就是好~~），尤其是用在树状菜单，权限管理（比如部门层级
这样的场景），随便搜一下，zTree的粉丝真是多，至少还要火好一段时间！
下面开始做一个简单的zTree
第一步：
下载zTree的插件，刚刚说了，他是一个jQuery插件，所以不要忘了jQuery这个引用
比如我下载了一个压缩文件zTree-zTree_v3-master.zip，解压后有四个文件夹，api，css，demo，js，其中js中已经下载有
jquery-1.4.4.min.js这个插件
第二步：
新建一个webProject，怎么建不讲了，太基础；我的工程名叫demoTest，
在WebRoot文件夹下新建一个test文件夹，
在test文件夹下建立四个文件夹，分别叫js，css，images，pages，
在pages文件夹下新建一个tt.html，和tt.js（作为你自己的写逻辑的js引用进来）
将解压出来的jquery-1.4.4.min.js，jquery.ztree.core.js，jquery.ztree.exedit.js放入js文件夹（注意.min.js是压缩版的，自己脑补）
将解压出来的css里的东西丢进css文件夹
OK，现在tt.html中引用这些个文件
<link rel="stylesheet" href="../css/demo.css" type="text/css"></link>
<link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../js/jquery.ztree.exedit.js"></script>
注意了：（1）插件的名字的jquery不要写成了jQuery（兔血的教训，检查到死都查不出来）
（2）jquery-1.4.4.min.js要放在ztree之前引用，不信我？自己测试下
第三步：
在tt.html中建立你的tree模型，也就是给一个初始的标记，这里zTree有一个固定的格式
<ul id="treeDemo" class="ztree"></ul>
第四步：在tt.js中初始化这棵树，初始化就一句
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
};
说明：
1、treeDemo就是模型树的id，setting是一个对象，zNodes是一个数组，里面装的是一个个的对象，并且对象都是json格式的
2、对象setting 和数组zNodes 要在初始化之前定义
第五步：
下面这步完成你将看到这棵树！！！我们要在这个对象（数组）里做什么呢？且听细说
现在的这个树，什么都没有，nothing，光秃秃的，没有分枝，没有叶子，所以我们要通过这两个对像给他加上一些想展现
的东西，在coding里面你应该知道父亲，儿子的概念，zNodes这个数组就是干这些事的，它里面装的都是对象，这些对象
描述的就是树的节点 ，下面我们搞个静态的树试试看，拿我举例子~~成这样的一棵树
首先获得模型树标签：var t =$("#treeDemo");
定义setting，暂定义为空的，var setting = {};
zNodes定义如下：
var zNodes = [
{
name:"彪哥朋友",
open:false,
isParent:true
},
{
name:"彪哥同学",
open:true,
isParent:true
},
{
name:"彪哥父母",
open:true,
id:1,
url:"adfdfad",
children:[
{
name:"彪哥"
},
{
name:"姐姐",
children:[{
name:"外甥"
}]
}
]
}
];
最后完成初始化：
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
};
现在这个tt.js完成
第六步：
引入tt.js到tt.html中，body标签内容如下
<ul id="treeDemo" class="ztree"></ul>
<script type="text/javascript" src="../js/tt.js"></script>
你可以尝试在head中导入tt.js,结果会告诉你，tt.js在body的文档尚未加载完就执行了，于是你看不到这棵树
接着我们来解释下那几个属性：
name：节点名称
open：节点默认是否展开，我特意将"彪哥朋友"设为false不展开，"彪哥同学"设为true展开（减号）
isParent：是否为文件夹
id：自定义的编号，可有可无
url：自定义的，可有可无
children：自己理解
下面我将这棵树的加号全部点开：
OK，这个简单的功能废了我老鼻子劲，因为一些根本不算问题的问题引起的，
比如说编码时误删了html的默认声明<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
比如说jquery要放在ztree之前引用这样的坑货
比如说即使这个jquery写成了jQuery，按着ctrl你依然可以点进去这个引用的插件，但是调用却不能调用
不过碰一鼻子灰，要比别人给你讲或者自己看别人写的博客印象深多了，弯路走多了后面的弯路才会越来越少
OK，下一篇讲这个setting