使用zTree樹不是第一次了 但是 還是翻閱着之前做的 對照着 使用起來比較方便 這里就把小例子列出來 總結一下使用步驟 這樣方便下次使用起來方便一點
使用zTree樹的步驟：
1.首先 在jsp中引用zTree相關的 CSS文件和JS文件
2.其次 在jsp中設置zTree的容器，一般一個<ul id="treeDemo" class="ztree" style="display:none;"></ul>就足夠了 但是必須要設置id，是為了后續的方便使用
3.再者 在js中 配置zTree的setting 配置信息
4.如果數據是動態的 則將動態獲取到的數據 動態組成ztree的節點
5.初始化 zTree樹
JSP頁面：
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 4 5 <% 6 String path = request.getContextPath(); 7 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 8 %> 9 <!DOCTYPE HTML> 10 <html> 11 <head> 12 <meta charset="utf-8"> 13 <meta name="renderer" content="webkit|ie-comp|ie-stand"> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 15 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0" /> 16 <meta http-equiv="Cache-Control" content="no-siteapp" /> 17 18 19 <link href="../css/H-ui.min.css" rel="stylesheet" type="text/css" /> 20 <link href="../css/H-ui.admin.css" rel="stylesheet" type="text/css" /> 21 <link href="../lib/icheck/icheck.css" rel="stylesheet" type="text/css" /> 22 <link href="../lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" /> 23 <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/> 24 <link rel="stylesheet" href="../css/bootstrapValidator.min.css"/> 25 26 27 <link rel="stylesheet" href="../css/zTree/demo.css" type="text/css"> 28 <link rel="stylesheet" href="../css/zTree/metroStyle/metroStyle.css" type="text/css"> 29 30 31 32 33 34 <title>添加角色</title> 35 </head> 36 <body style="width: 70%;"> 37 <div class="pd-20"> 38 <form action="" method="post" class="form form-horizontal" id="form-role-add"> 39 <div class="row cl"> 40 <label class="form-label col-2"><span class="c-red">*</span>角色名稱：</label> 41 <div class="formControls col-10"> 42 <input type="text" class="input-text" placeholder="" id="roleName" name="roleName" datatype="*4-16" nullmsg="角色名稱不能為空"> 43 </div> 44 </div> 45 <div class="row cl"> 46 <label class="form-label col-2">備注：</label> 47 <div class="formControls col-10"> 48 <input type="text" class="input-text" placeholder="" id="" name="roleCre"> 49 </div> 50 </div> 51 52 <div class="content_wrap row cl"> 53 <div class="zTreeDemoBackground" > 54 <button type="button" class="btn btn-success radius fen" ><i class="icon-ok"></i> 分配權限</button> 55 <button type="button" class="btn btn-default radius yin" ><i class="icon-ok"></i> 隱藏權限</button> 56 <ul id="treeDemo" class="ztree" style="display:none;"></ul> 57 </div> 58 </div> 59 <div class="row cl"> 60 <div class="col-10 col-offset-8"> 61 <button type="button" class="btn btn-success radius" id="roleAdd" ><i class="icon-ok"></i> 添加</button> 62 63 <button type="reset" class="btn btn-success radius"><i class="icon-ok"></i>清空</button> 64 </div> 65 </div> 66 </form> 67 </div> 68 <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 69 <script type="text/javascript" src="../lib/Validform/5.3.2/Validform.min.js"></script> 70 <script type="text/javascript" src="../lib/icheck/jquery.icheck.min.js"></script> 71 <script type="text/javascript" src="../lib/layer/1.9.3/layer.js"></script> 72 <script type="text/javascript" src="../js/H-ui.js"></script> 73 <script type="text/javascript" src="../js/H-ui.admin.js"></script> 74 <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> 75 <script type="text/javascript" src="../js/bootstrapValidator.min.js"></script> 76 <script type="text/javascript" src="../js/systeminfo/role/roleadd.js"></script> 77 78 <script type="text/javascript" src="../js/zTree/jquery.ztree.core.js"></script> 79 <script type="text/javascript" src="../js/zTree/jquery.ztree.excheck.js"></script> 80 <script type="text/javascript" src="../js/zTree/jquery.ztree.exedit.js"></script> 81 <script type="text/javascript" src="../js/systeminfo/role/zTreeUse.js"></script> 82 </body> 83 </html>
JS代碼：
1 //zTree樹的 配置信息 2 var setting = { 3 view: { 4 selectedMulti: true//設置是否同時選中多個節點 5 }, 6 check: { 7 enable: true 8 }, 9 data: { 10 simpleData: { 11 enable: true//使用簡單數據模式。。簡單數據模式就是Array 12 } 13 }, 14 /* callback: { 15 beforeClick: beforeClick,//捕獲單擊節點之前的事件回調函數 16 beforeCollapse: beforeCollapse,//用於捕獲父節點折疊之前的事件回調函數 17 beforeExpand: beforeExpand,//用於捕獲父節點展開之前的事件回調函數 18 onCollapse: onCollapse,//用於捕獲節點被折疊的事件回調函數 19 onExpand: onExpand//用於捕獲節點被展開的事件回調函數 20 }*/ 21 22 }; 23 24 function beforeClick(treeId, treeNode) { 25 alert("節點點擊之前事件"+treeId+treeNode.name); 26 return true; 27 } 28 function beforeCollapse(treeId, treeNode) { 29 alert("父節點折疊之前事件"+treeId+treeNode.name); 30 return true; 31 } 32 function beforeExpand(treeId, treeNode) { 33 alert("父節點展開之前事件"+treeId+treeNode.name); 34 return true; 35 } 36 function onCollapse(event, treeId, treeNode) { 37 alert("節點折疊事件"+treeId+treeNode.name); 38 } 39 function onExpand(event, treeId, treeNode) { 40 alert("節點展開事件"+treeId+treeNode.name); 41 } 42 43 44 $(document).ready( function () { 45 46 //為添加角色的表單加驗證效果 47 $('#form-user-add').bootstrapValidator(); 48 /** 49 * 添加角色的按鈕 50 */ 51 $("#roleAdd").click(function(){ 52 $('#form-role-add').bootstrapValidator('validate');//為表單的添加按鈕 添加一個綁定表單的方法 53 var roleName = $("input[name='roleName']").val(); 54 var roleCre = $("input[name='roleCre']").val(); 55 var temp; 56 var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); 57 var checkedNodes = treeObj.getCheckedNodes(); 58 var nodeArr = new Array(); 59 if(treeObj == null){ 60 layer.msg('未分配權限！', { 61 icon: 3, 62 time: 2000 63 }, function(){ 64 }); 65 }else if(checkedNodes.length > 0){//勾選了 66 $.each(checkedNodes,function(i,node){ 67 nodeArr.push(node.id); 68 }); 69 if(roleName !="" ){ 70 $.ajax({url:"roleAdd.htmls", 71 dataType:'json', 72 type:"post", 73 traditional:true, 74 data:{ 75 "roleName" : roleName, 76 "roleCre" : roleCre, 77 "nodeArr" : nodeArr, 78 }, 79 success:function(data){ 80 if(data != null){ 81 parent.page.pageSet(); 82 } 83 parent.layer.close(parent.indexRoleAdd); //獲取到layer的彈出窗 關閉它 indexRoleAdd 84 }}); 85 } 86 return false; 87 }else if(checkedNodes.length == 0){ 88 parent.layer.msg('未分配權限！', { 89 icon: 3, 90 time: 2000 91 }, function(){ 92 }); 93 parent.layer.close(parent.indexRoleAdd); 94 } 95 }); 96 97 //點擊 分配權限 則展示zTree樹 98 $(".fen").click(function(){ 99 $("#treeDemo").show(); 100 $.getJSON("../roleDeal/showAllAuthority.htmls", function(data){//去后台獲取到所有權限信息 用於構造zTree樹 101 if (null != data) { 102 //獲取角色名作為根節點名字 103 var rootName = $("#roleName").val(); 104 //自定義的根節點 設置pId為0則為根節點 open代表默認打開的 nocheck表示不對根節點顯示單選/復選框 105 var rootNodes = {id:1, pId:0, name:rootName, open:true,nocheck:true}; 106 //構建整個權限樹 107 var zNodes = []; 108 var d = data; 109 $.each(data,function(i,d){ 110 var o = {}; 111 o.id = d.authorityId; 112 o.operation = d.operation; 113 o.name = d.authorityName; 114 o.isEnable = d.isEnable; 115 o.updateDate = d.updateDate; 116 o.pId = d.authorityCre; 117 o.nocheck = false; 118 o.open = false; 119 zNodes.push(o);//再將整個的異步加載的數據 子節點給權限樹 構成一個完整的樹 120 }); 121 122 zNodes.push(rootNodes);//首先將根節點給權限樹 123 $.fn.zTree.init($("#treeDemo"), setting, zNodes); 124 } else { 125 parent.layer.msg('沒有獲得項目類型信息，或分類下沒有項目信息！', {//彈出框 126 icon: 3, 127 time: 2000 //2秒關閉（如果不配置，默認是3秒） 128 }, function(){ 129 //do something 130 }); 131 } 132 }); 133 }); 134 //點擊隱藏 則隱藏樹 135 $(".yin").click(function(){ 136 $("#treeDemo").hide(); 137 }); 138 139 //為角色名輸入框 綁定change事件 狂內容改變 則樹根名字變化 140 $("#roleName").change(function(){ 141 var roleName = $("input[name='roleName']").val(); 142 var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); 143 if(treeObj == null ){ 144 145 }else{ 146 var nodes = treeObj.getNodesByParam("id", 1, null); 147 nodes[0].name =roleName; 148 treeObj.refresh(); 149 } 150 }); 151 152 } );
如果想要更多的效果 例如節點上增刪改等 按鈕操作 更多的樣式 更多的事件 就可以查看zTree的API
界面效果：
