第二篇：怕碰到是因为没掌握，来吧，zTree！

一直以来看见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