【zTree】 zTree使用的 小例子

自古美人都是妖i 提交于 2020-03-21 11:03:22

使用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 

界面效果:

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!