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"}  ];