【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                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
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>

View Code

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 } );

View Code

如果想要更多的效果例如节点上增删改等按钮操作更多的样式更多的事件就可以查看zTree的API

界面效果：