【zTree】 zTree使用的 小例子
使用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
界面效果：
