jquery zTree的基本用法

①在頁面引用zTree的js和css：

<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">   
<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script> 

②代碼基本實現

//======html
<div>
  <ul id="treeContainer" class="ztree"></ul>
</div>

//================js腳本
var zNodes = [];
$(function(){
   loadTree();     //初始化樹
   getTreeData();  //後臺加載數據
});
function loadTree(){
    $.fn.zTree.init($.('#treeContainer'),{
        data:{
            simpleData:{
                enable:true
            }
        },
        view:{
            nameIsHTML:true,
            showLine:true,
            dblClick:false
        },
        callback:{
            onClick : nodeEvents   //點擊節點執行的方法
        }
    },zNodes);
}
function getTreeData(){
     $.ajax({
          type:"post",
          url:"",
          async:true,
          data:{},
          dataType:"TEXT",
          success:function(data)
          {
              var arr = data.split('\1');
            zNodes.push({
                id:arr[0],  //自己id
                pId:arr[1], //父級id
                name:'',    //顯示的名稱
                data:'',   //這個data是傳到下面nodeEvent()裏面的
                open:true   //默認節點打開
            });
          }
          
      });
}

function nodeEvents(e,treeId,treeNode){
    var data = treeNode.data;
    
    var zTree = $.fn.zTree.getZTreeObj('treeContainer');
    zTree.expandNode(treeNode,true);
}

3.setting 配置詳解

  1     一. zTree的 setting 配置詳解  
  2       
  3     var setting = {  
  4      treeId : "",//zTree 的惟一標識，初始化後，等於 用戶定義的 zTree 容器的 id 屬性值。  
  5     //請勿進行初始化 或 修改，屬於內部參數。   
  6      treeObj : null,//zTree 容器的 jQuery 對象，主要功能：便於操做。  
  7     //請勿進行初始化 或 修改，屬於內部參數。  
  8       
  9       
 10      async : {// 是否異步加載 至關於ajax  
 11     autoParam : [], //能夠設置提交時的參數名稱，例如 server 只接受 zId : ["id=zId"] ; 默認值空  
 12     contentType : "application...",  
 13     dataFilter : null,  
 14     dataType : "text",  
 15     enable : false,//設置 zTree 是否開啓異步加載模式  
 16     //默認值：false  
 17     otherParam : [],//其餘參數 ;直接用 JSON 格式製做鍵值對，例如：{ key1:value1, key2:value2 }  
 18     type : "post",  //請求方式  
 19     url : "" //路徑  
 20      },  
 21      callback : {//返回函數; 根據需求選擇合適的監聽事件  //如下事件默認權威null 事件例子參見第83行  
 22     beforeAsync : null,//異步加載以前的事件回調函數，zTree 根據返回值肯定是否容許進行異步加載  
 23       
 24     beforeCheck : null,//勾選 或 取消勾選 以前的事件回調函數，而且根據返回值肯定是否容許 勾選 或 取消勾選  
 25       
 26     beforeClick : null,//單擊節點以前的事件回調函數，而且根據返回值肯定是否容許單擊操做  
 27       
 28     beforeCollapse : null,//父節點摺疊以前的事件回調函數，而且根據返回值肯定是否容許摺疊操做  
 29       
 30     beforeDblClick : null,// zTree 上鼠標雙擊以前的事件回調函數，而且根據返回值肯定觸發 onDblClick 事件回調函數  
 31       
 32     beforeDrag : null,//節點被拖拽以前的事件回調函數，而且根據返回值肯定是否容許開啓拖拽操做  
 33       
 34     beforeDragOpen : null,//拖拽節點移動到摺疊狀態的父節點後，即將自動展開該父節點以前的事件回調函數，而且根據返回值肯定是否容許自動展開操做  
 35       
 36     beforeDrop : null,//節點拖拽操做結束以前的事件回調函數，而且根據返回值肯定是否容許此拖拽操做  
 37       
 38     beforeEditName : null,//節點編輯按鈕的 click 事件，而且根據返回值肯定是否容許進入名稱編輯狀態  
 39       
 40     beforeExpand : null,//父節點展開以前的事件回調函數，而且根據返回值肯定是否容許展開操做  
 41       
 42     beforeMouseDown : null,// zTree 上鼠標按鍵按下以前的事件回調函數，而且根據返回值肯定觸發 onMouseDown 事件回調函數  
 43       
 44     beforeMouseUp : null,//zTree 上鼠標按鍵鬆開以前的事件回調函數，而且根據返回值肯定觸發 onMouseUp 事件回調函數  
 45       
 46     beforeRemove : null,//節點被刪除以前的事件回調函數，而且根據返回值肯定是否容許刪除操做  
 47       
 48     beforeRename : null,//節點編輯名稱結束（Input 失去焦點 或 按下 Enter 鍵）以後，更新節點名稱數據以前的事件回調函數，而且根據返回值肯定是否容許更更名稱的操做  
 49       
 50     beforeRightClick : null,// zTree 上鼠標右鍵點擊以前的事件回調函數，而且根據返回值肯定觸發 onRightClick 事件回調函數  
 51       
 52     onAsyncError : null,//異步加載出現異常錯誤的事件回調函數  
 53       
 54     onAsyncSuccess : null,//異步加載正常結束的事件回調函數  
 55       
 56     onCheck : null,// checkbox / radio 被勾選 或 取消勾選的事件回調函數  
 57       
 58     onClick : null,//節點被點擊的事件回調函數  
 59       
 60     onCollapse : null,//節點被摺疊的事件回調函數  
 61       
 62     onDblClick : null,// zTree 上鼠標雙擊以後的事件回調函數  
 63       
 64     onDrag : null,//節點被拖拽的事件回調函數  
 65       
 66     onDragMove : null,//節點被拖拽過程當中移動的事件回調函數  
 67       
 68     onDrop : null,//節點拖拽操做結束的事件回調函數  
 69       
 70     onExpand : null,//節點被展開的事件回調函數  
 71       
 72     onMouseDown : null,// zTree 上鼠標按鍵按下後的事件回調函數  
 73       
 74     onMouseUp : null,// zTree 上鼠標按鍵鬆開後的事件回調函數  
 75       
 76     onNodeCreated : null,//節點生成 DOM 後的事件回調函數  
 77       
 78     onRemove : null,//刪除節點以後的事件回調函數。  
 79       
 80     onRename : null,//節點編輯名稱結束以後的事件回調函數。  
 81       
 82     onRightClick : null// zTree 上鼠標右鍵點擊以後的事件回調函數  
 83      },  
 84         例. 節點勾選或取消事件   
 85     function zTreeOnCheck(event, treeId, treeNode) {  
 86     alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);  
 87     };  
 88     var setting = {  
 89     callback: {  
 90     onCheck: zTreeOnCheck  
 91     }  
 92     };  
 93         Function 參數說明  
 94     參數數據類型說明  
 95     eventjs event 對象標準的 js event 對象  
 96     treeId String對應 zTree 的 treeId，便於用戶操控  
 97     treeNode JSON被勾選 或 取消勾選的節點 JSON 數據對象  
 98       
 99       
100     setting參數配置講解繼續...  
101      check : {//設置zTree是否能夠被勾選,及勾選的參數配置  
102     autoCheckTrigger : false,//設置自動關聯勾選時是否觸發 beforeCheck / onCheck 事件回調函數。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效]  
103       
104       
105     chkboxType : {"Y": "ps", "N": "ps"},//勾選 checkbox 對於父子節點的關聯關係。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效]  
106       
107       
108     chkStyle : "checkbox",//勾選框類型(checkbox 或 radio）[setting.check.enable = true 時生效]  
109       
110       
111     enable : false,//設置 zTree 的節點上是否顯示 checkbox / radio  
112     //默認值: false  
113       
114       
115     nocheckInherit : false//當父節點設置 nocheck = true 時，設置子節點是否自動繼承 nocheck = true 。[setting.check.enable = true 時生效]  
116       
117       
118     chkDisabledInherit : false//當父節點設置 chkDisabled = true 時，設置子節點是否自動繼承 chkDisabled = true 。[setting.check.enable = true 時生效]  
119       
120       
121     radioType : "level"//radio 的分組範圍。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 時生效]  
122      },  
123      data : {//很是重要  
124     keep : { //子節點和父節點屬性設置 默認值都爲false  
125       leaf : false,//zTree 的節點葉子節點屬性鎖，是否始終保持 isParent = false  
126       
127       
128       parent : false//zTree 的節點父節點屬性鎖，是否始終保持 isParent = true  
129     },  
130     key : { //節點數據  
131       checked : "checked",//zTree 節點數據中保存 check 狀態的屬性名稱。  
132       
133       
134       children : "children",//zTree 節點數據中保存子節點數據的屬性名稱。  
135       
136       
137       name : "name",//zTree 節點數據保存節點名稱的屬性名稱。  
138       
139       
140       title : "" //zTree 節點數據保存節點提示信息的屬性名稱。[setting.view.showTitle = true 時生效]  
141       
142       
143       url : "url" //設置 zTree 顯示節點時，將 treeNode 的 xUrl 屬性當作節點連接的目標 URL  
144     },  
145     simpleData : {  
146       enable : false,//肯定 zTree 初始化時的節點數據、異步加載時的節點數據、或 addNodes 方法中輸入的 newNodes 數據是否採用簡單數據模式 (Array)  
147       
148       
149       idKey : "id",//節點數據中保存惟一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]  
150       
151       
152       pIdKey : "pId",//節點數據中保存其父節點惟一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]  
153       
154       
155       rootPId : null//用於修正根節點父節點數據，即 pIdKey 指定的屬性值。[setting.data.simpleData.enable = true 時生效]  
156     }  
157      },  
158      edit : {//能夠編輯節點 : 增 刪 改  
159     drag : {  
160     autoExpandTrigger : true,//拖拽時父節點自動展開是否觸發 onExpand 事件回調函數。[setting.edit.enable = true 時生效]  
161       
162       
163     isCopy : true,//拖拽時, 設置是否容許複製節點。[setting.edit.enable = true 時生效]  
164       
165       
166     isMove : true,//拖拽時, 設置是否容許移動節點。[setting.edit.enable = true 時生效]  
167       
168       
169     prev : true, //拖拽到目標節點時，設置是否容許移動到目標節點前面的操做。[setting.edit.enable = true 時生效]  
170       
171       
172     next : true, //拖拽到目標節點時，設置是否容許移動到目標節點後面的操做。[setting.edit.enable = true 時生效]  
173       
174       
175     inner : true, //拖拽到目標節點時，設置是否容許成爲目標節點的子節點。[setting.edit.enable = true 時生效]  
176       
177       
178     borderMax : 10,//拖拽節點成爲根節點時的 Tree 內邊界範圍 (單位：px)。[setting.edit.enable = true 時生效]  
179       
180       
181     borderMin : -5,//拖拽節點成爲根節點時的 Tree 外邊界範圍 (單位：px)。[setting.edit.enable = true 時生效]  
182       
183       
184     minMoveSize : 5,//斷定是否拖拽操做的最小位移值 (單位：px)。[setting.edit.enable = true 時生效]  
185       
186       
187     maxShowNodeNum : 5,//拖拽多個兄弟節點時，浮動圖層中顯示的最大節點數。 多餘的節點用...代替。[setting.edit.enable = true 時生效]  
188       
189       
190     autoOpenTime : 500//拖拽時父節點自動展開的延時間隔。 (單位：ms)[setting.edit.enable = true 時生效]  
191       
192     },  
193     editNameSelectAll : false,  
194     enable : false,//設置 zTree 是否處於編輯狀態,true / false 分別表示 能夠 / 不能夠 編輯  
195       
196     removeTitle : "remove",//刪除按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 時生效]  
197       
198     renameTitle : "rename",//編輯名稱按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 時生效]  
199       
200     showRemoveBtn : true,//設置是否顯示刪除按鈕。[setting.edit.enable = true 時生效]  
201       
202     showRenameBtn : true//設置是否顯示編輯名稱按鈕。[setting.edit.enable = true 時生效]  
203       
204     },  
205      view : {  
206     addDiyDom : null,//用於在節點上固定顯示用戶自定義控件  
207       
208     addHoverDom : null,//用於當鼠標移動到節點上時，顯示用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕  
209       
210     autoCancelSelected : true,//點擊節點時，按下 Ctrl 或 Cmd 鍵是否容許取消選擇操做。  
211       
212     dblClickExpand : true,//雙擊節點時，是否自動展開父節點的標識  
213       
214     expandSpeed : "fast",//zTree 節點展開、摺疊時的動畫速度，設置方法同 JQuery 動畫效果中 speed 參數。  
215       
216     fontCss : {}, //個性化文字樣式，只針對 zTree 在節點上顯示的<A>對象。  
217       
218     nameIsHTML : false,//設置 name 屬性是否支持 HTML 腳本  
219       
220     removeHoverDom : null,//用於當鼠標移出節點時，隱藏用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕  
221       
222     selectedMulti : true,//設置是否容許同時選中多個節點。  
223       
224     showIcon : true,//設置 zTree 是否顯示節點的圖標。  
225       
226     showLine : true,//設置 zTree 是否顯示節點之間的連線。  
227       
228     showTitle : true,//設置 zTree 是否顯示節點的 title 提示信息(即節點 DOM 的 title 屬性)。  
229       
230     txtSelectedEnable : false//設置 zTree 是否容許能夠選擇 zTree DOM 內的文本。  
231      }  
232     }