0 zTree簡介 樹形控制項的使用是應用開發過程中必不可少的。zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。 0.0 zTree的特點 最新版的zTree將核心代碼按照功能進行了分割，不需要的代碼可以不用載入，如普通使 ...
0 zTree簡介
樹形控制項的使用是應用開發過程中必不可少的。zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。
0.0 zTree的特點
最新版的zTree將核心代碼按照功能進行了分割，不需要的代碼可以不用載入，如普通使用只需要載入核心的jquery.ztree.core-3.5.js，需要使用勾選功能載入jquery.ztree.excheck-3.5.min.js，需要使用編輯功能載入jquery.ztree.exedit-3.5.min.js
•採用了延遲載入技術，上萬節點輕鬆載入，即使在 IE6 下也能基本做到秒殺
•相容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
•支持 JSON 數據
•支持靜態 和 Ajax 非同步載入節點數據
•支持任意更換皮膚 / 自定義圖標（依靠css）
•支持極其靈活的 checkbox 或 radio 選擇功能
•提供多種事件響應回調
•靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還可以多節點拖拽
•在一個頁面內可同時生成多個 Tree 實例
•簡單的參數配置實現，靈活多變的功能
0.1 zTree文件介紹
從zTree官網下載的zTree包括以下組成部分
•metroStyle文件夾：zTree的metro風格樣式相關文件（圖片及css樣式表）。
•zTreeStyle文件夾：zTree的標準風格樣式文件夾（圖片及css樣式表）
•js文件：zTree.all.js是完整的js庫，可單純載入此文件實現所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是對ztree按照功能進行的分割，分別對應基本功能、覆選功能、編輯功能、顯隱功能。
1 <!DOCTYPE html>
2 <HTML>
3 <HEAD>
4 <TITLE> ZTREE DEMO </TITLE>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
7 <script type="text/javascript" src="jquery-1.4.2.js"></script>
8 <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
9 <SCRIPT LANGUAGE="JavaScript">
10 var zTreeObj;
11 var setting = {}; // zTree 的參數配置，後面詳解
12 var zNodes = [ // zTree 的數據屬性，此處使用標準json格式
13 {
14 name: "test1", open: true, children: [
15 { name: "test1_1" }, { name: "test1_2" }]
16 },
17 {
18 name: "test2", open: true, children: [
19 { name: "test2_1" }, { name: "test2_2" }]
20 }
21 ];
22 $(document).ready(function () {
23 zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化zTree，三個參數一次分別是容器(zTree 的容器 className 別忘了設置為 "ztree")、參數配置、數據源
24 });
25 </SCRIPT>
26 </HEAD>
27 <BODY>
28 <div>
29 <ul id="treeDemo" class="ztree"></ul>
30 </div>
31 </BODY>
32 </HTML>
html
運行結果如下
1.1 zTree的配置
zTree的配置採用Json格式，按照配置的類型分為view（可視界面相關配置）、data（數據相關配置）、check（覆選框相關配置）、callback（各類事件的回調函數配置）、async（zTree非同步載入配置），一下是我們經常會使用到的一些配置及說明，其他詳細配置可以參考zTree官方API文檔的詳細介紹。
1 var setting = {
2 view: {
3 selectedMulti: true, //設置是否能夠同時選中多個節點
4 showIcon: true, //設置是否顯示節點圖標
5 showLine: true, //設置是否顯示節點與節點之間的連線
6 showTitle: true, //設置是否顯示節點的title提示信息
7 },
8 data: {
9 simpleData: {
10 enable: false, //設置是否啟用簡單數據格式（zTree支持標準數據格式跟簡單數據格式，上面例子中是標準數據格式）
11 idKey: "id", //設置啟用簡單數據格式時id對應的屬性名稱
12 pidKey: "pId" //設置啟用簡單數據格式時parentId對應的屬性名稱,ztree根據id及pid層級關係構建樹結構
13 }
14 },
15 check:{
16 enable: true //設置是否顯示checkbox覆選框
17 },
18 callback: {
19 onClick: onClick, //定義節點單擊事件回調函數
20 onRightClick: OnRightClick, //定義節點右鍵單擊事件回調函數
21 beforeRename: beforeRename, //定義節點重新編輯成功前回調函數，一般用於節點編輯時判斷輸入的節點名稱是否合法
22 onDblClick: onDblClick, //定義節點雙擊事件回調函數
23 onCheck: onCheck //定義節點覆選框選中或取消選中事件的回調函數
24 },
25 async: {
26 enable: true, //設置啟用非同步載入
27 type: "get", //非同步載入類型:post和get
28 contentType: "application/json", //定義ajax提交參數的參數類型，一般為json格式
29 url: "/Design/Get", //定義數據請求路徑
30 autoParam: ["id=id", "name=name"] //定義提交時參數的名稱，=號前面標識節點屬性，後面標識提交時json數據中參數的名稱
31 }
32 };
setting.js
需要註意的是，zTree的事件回調部分，基本上每一個事件都對應一個beforeXXX事件，比如onClick事件對應有一個beforeOnClick事件，主要用於控制相關事件是否允許執行，如果before事件返回false，則取消執行對應相關事件。
原文地址：https://www.cnblogs.com/sylvandu/p/5805592.html
