ztre的使用入门

一、首先须要下载ztree插件，

二、把下载的插件中的js和css放到项目中去（img文件默认放到css文件下方，若是把img文件放到其余地方，加载出来的树将没有默认图标（文件夹图标）和节点前的展开闭合的加减号，

三、在项目中引入jquery.js、ztree核心js、zTreeStyle.css

      jquery-1.4.2.js、jquery.ztree.core-3.x.js、zTreeStyle.css  这三个都是ztree插件中的，其中jquery.js  能够是更高版本的

     这是基本使用，复杂的还需添加jquery.ztree.excheck-3.5.jsjquery.ztree.exedit-3.5.js   最好都添加上

四、写一个ztree的容器<ul id="treeDemo" class="ztree"></ul>       其中class是必须的，且值必须是ztree，id是ztree初始化后ztree的treeId

五、设置setting    var setting = {};

六、ztree数据

      var zNodes = [ {name:"test1", open:true, children:[ {name:"test1_1"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ];

七、初始化ztree

      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

八、若setting设置   simpleData    则树节点数据能够是简单数组（即不须要写成上方zNodes那样的json嵌套格式）

      var setting = {
           simpleData: {
           enable: true
       };

     此时zNodes能够是下面格式

    var zNodes =[           { id:1, pId:0, name:"节点搜索演示 1", t:"id=1", open:true},           { id:11, pId:1, name:"关键字能够是名字", t:"id=11"},           { id:12, pId:1, name:"关键字能够是level", t:"id=12"},           { id:13, pId:1, name:"关键字能够是id", t:"id=13"},           { id:14, pId:1, name:"关键字能够是各类属性", t:"id=14"},            { id:2, pId:0, name:"节点搜索演示 2", t:"id=2", open:true},           { id:21, pId:2, name:"能够只搜索一个节点", t:"id=21"},          { id:22, pId:2, name:"能够搜索节点集合", t:"id=22"},          { id:23, pId:2, name:"搜我吧", t:"id=23"},          { id:3, pId:0, name:"节点搜索演示 3", t:"id=3", open:true },          { id:31, pId:3, name:"个人 id 是: 31", t:"id=31"},          { id:32, pId:31, name:"个人 id 是: 32", t:"id=32"},          { id:33, pId:32, name:"个人 id 是: 33", t:"id=33"}  ];