zTree ，一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。兼容 IE、FireFox、Chrome 等瀏覽器，在一個頁面內可同時生成多個 Tree 實例、支持 JSON 數據、支持一次性靜態生成 和 Ajax 異步加載 兩種方式、支持多種事件響應及反饋、支持 Tree 的節點移動、編輯、刪除、支持任意更換皮膚 / 個性化圖標（依靠css）、支持極其靈活的 checkbox 或 radio 選擇功能、簡單的參數配置實現 靈活多變的功能等特點。
1、 zTree的核心是zTree(setting, [zTreeNodes])兩個屬性，這個函數接受一個JSON格式的數據對象setting和一個JSON格式數據的zTreeNodes從而來構建ztree。
2、 setting : zTree 的參數配置都在這里完成，簡單的說：樹的樣式、事件、訪問路徑等都在這里配置，setting參數數量較多，具體可參考zTree的API，例如：
var setting = {
showLine: true,
checkable: true
};
3、 zTreeNodes：是ztree的全部節點數據結合，采用由JSON對象組成的數據結構；zTreeNodes的格式分為兩種：利用Json格式嵌套體現父子關系和Array簡單格式。
帶有父子關系的標准zTreeNodes如下：
var zTreeNodes = [
{"id":1, "name":"test1", "nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111, "name":"test111"}
]},
{"id":12, "name":"test12"}
]},
......
];
帶有父子關系的簡單 Array 格式(isSimpleData)的 zTreeNodes 舉例：
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
......
];
1.1.1 頁面構建方式
1、下面詳細展示平台中開發所使用的zTree的構建結構以及步驟：
① 頁面引用zTree的js和css： 平台中的css,js統一引入公共方法
② 在頁面定義zTree盛放容器：
<div flex="20">
<ul id="moduleTree" class="ztree"></ul>
</div>
③ 在進入頁面時初始化樹形數據
$(function() {
zTree = $("#modulTree").zTree(setting, treeNodes);
});
④ 在script腳本中定義setting和zTreeNodes:
var treeNodeData = '';
var setting = {};
$(function(){
setting = {
data: {
simpleData: {
enable: true
}
},
callback: {
onClick:moduleClick
}
};
var zTreeNodes = $!{moduleTreeData.encodeJson};
$.fn.zTree.init($("#moduleTree"), setting, zTreeNodes)
1.1.2 后台數據的構建：
數據構建如上圖所示，將數據結果加入到zTreeNodes中樹形結構數據就封裝完成，效果圖如下
1.1.3 樹形列表與jqgrid表格的應用
開發過程中，需要根據左邊樹形結構列表的數據去查詢數據或者其他具體操作，頁面結構如下圖展示根據左邊節點數據查詢數據，頁面構建方法如下：
<div flex="20">
<ul id="moduleTree" class="ztree"></ul>
</div>
<!-- 列表 -->
<div flex="80">
<div class="panel-group cus-collapse box-shadow" id="accordion">
<div class="panel panel-default">
<div class="cus-grid" id="grid-wrap">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
</div>
</div>
</div>
通過在zTree的setting中定義回掉函數 來調用zTree的onClick方法，如下圖展示
這些是我在開發過程中zTree的應用，具體的參數以及內容大家可疑參考http://www.ztree.me/v3/main.php