zTree下載：https://github.com/zTree/zTree_v3
目錄：
就我看來，zTree較為實用的有以下幾點：
- zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。
- 支持 JSON 數據
- 支持靜態 和 Ajax 異步加載節點數據
- 支持任意更換皮膚 / 自定義圖標
- 支持極其靈活的 checkbox 或 radio 選擇功能
- 提供多種事件響應回調
- 靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還可以多節點拖拽喲
- 在一個頁面內可同時生成多個 Tree 實例
- 簡單的參數配置實現 靈活多變的功能
zTree入門幾個要點（引入& 聲明className & 具體的多看api）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="demoStyle/demo.css" type="text/css"> <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> <!--引入ztree樣式--> <script type="text/javascript" src="jquery-1.4.2.js"></script> <!--要首先引入jquery文件--> <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script> <SCRIPT LANGUAGE="JavaScript"> var zTreeObj; // zTree 的參數配置，深入使用請參考 API 文檔（setting 配置詳解） var setting = {}; // zTree 的數據屬性，深入使用請參考 API 文檔（zTreeNode 節點數據詳解） var zNodes = [ {name:"test1", open:true, children:[ {name:"test1_1"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ]; //頁面加載完成后，加載json數據，進行初始化 $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </SCRIPT> </HEAD> <BODY> <div> <ul id="treeDemo" class="ztree"></ul> <!--className要設置為ztree， class="ztree"--> </div> </BODY> </HTML>
以構建頁面左側樹形菜單為例介紹ztree插件的使用
1. 引入ztree的相關文件
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all.js"></script>
這里引入包含ztree所有功能的js文件，實際使用中可根據需要來引用，以節省資源
2. 使用json數據構造ztree
2.1 使用標准json數據構造ztree（看看就行，不推薦）
<!-- 展示樹形菜單 ：使用標准json數據構造--> <ul id="ztree1" class="ztree"></ul> <script type="text/javascript"> $(function(){ //當頁面加載完成后，動態創建ztree菜單 var setting = {};//設置ztree相關的屬性 //構造json數據 var zNodes = [ {name:'系統管理'},//每個json對象對應一個節點數據 {name:'用戶管理',children:[ {name:'用戶添加'}, {name:'用戶修改'} ]},//每個json對象對應一個節點數據 {name:'權限管理'}//每個json對象對應一個節點數據 ]; //創建ztree $.fn.zTree.init($("#ztree1"),setting,zNodes); }); </script>
2.2 使用簡單json構造ztree（推薦）
<!-- 展示樹形菜單 ：使用簡單json數據構造--> <ul id="ztree2" class="ztree"></ul> <script type="text/javascript"> $(function(){ //當頁面加載完成后，動態創建ztree菜單 var setting2 = { data: { simpleData: { enable: true//啟用簡單json數據描述節點數據 } } };//設置ztree相關的屬性 //構造json數據 var zNodes2 = [ {id:'1',pId:'0',name:'系統管理'},//每個json對象對應一個節點數據 {id:'2',pId:'0',name:'用戶管理'},//每個json對象對應一個節點數據 {id:'21',pId:'2',name:'用戶添加'},//每個json對象對應一個節點數據（二級） {id:'22',pId:'2',name:'用戶修改'},//每個json對象對應一個節點數據（二級） {id:'3',pId:'0',name:'權限管理'}//每個json對象對應一個節點數據 ]; //創建ztree $.fn.zTree.init($("#ztree2"),setting2,zNodes2); }); </script>
樹形菜單效果如下：
2.3 實際項目開發中，為便於維護，數據會單獨存放在一個json文件中，這時需要發送ajax請求獲取菜單數據構造ztree
<ul id="ztree3" class="ztree"></ul> <script type="text/javascript"> $(function(){ var setting3 = { data : { simpleData : { enable : true //啟用簡單json數據描述節點數據 } } };//設置ztree相關的屬性 //發送ajax請求獲取json數據構造ztree var url = "${pageContext.request.contextPath}/json/menu.json"; $.post(url,{},function(data){ //創建ztree $.fn.zTree.init($("#ztree3"), setting3, data); },'json'); }); </script>
menu.json
[
{ "id":"11", "pId":"0", "name":"基礎數據"},
{ "id":"112", "pId":"11", "name":"取派員設置", "page":"page_base_staff.action"},
{ "id":"113", "pId":"11", "name":"區域設置","page":"page_base_region.action"},
{ "id":"114", "pId":"11", "name":"管理分區", "page":"page_base_subarea.action"},
{ "id":"115", "pId":"11", "name":"管理定區/調度排班","page":"page_base_decidedzone.action"},
{ "id":"12", "pId":"0", "name":"受理"},
{ "id":"121", "pId":"12", "name":"業務受理" ,"page":"page_qupai_noticebill_add.action"},
{ "id":"122", "pId":"12", "name":"工作單快速錄入" ,"page":"page_qupai_quickworkorder.action"},
{ "id":"124", "pId":"12", "name":"工作單導入" ,"page":"page_qupai_workorderimport.action"},
{ "id":"13", "pId":"0", "name":"調度"},
{ "id":"131", "pId":"13", "name":"查台轉單","page":""},
{ "id":"132", "pId":"13", "name":"人工調度","page":"page_qupai_diaodu.action"}
]
樹形菜單效果如下：
3. 為ztree節點綁定事件，使得點擊節點時打開相關的選項卡
<ul id="ztree3" class="ztree"></ul> <script type="text/javascript"> $(function(){ var setting3 = { data : { simpleData : { enable : true //啟用簡單json數據描述節點數據 } }, callback: {//綁定事件 onClick: function(a,b,treeNode){ var page = treeNode.page; if(page != undefined){//需要打開選項卡 //判斷當前選項卡是否已經打開 var e = $("#tt").tabs("exists",treeNode.name); if(e){ //已經打開 $("#tt").tabs("select",treeNode.name); }else{ $("#tt") .tabs( "add", { title : treeNode.name, content : '<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>', closable : true, iconCls : 'icon-edit' }); } } } } };//設置ztree相關的屬性
//發送ajax請求獲取json數據構造ztree var url = "${pageContext.request.contextPath}/json/menu.json"; $.post(url,{},function(data){ //創建ztree $.fn.zTree.init($("#ztree3"), setting3, data); },'json'); }); </script>
效果：
