zoukankan      html  css  js  c++  java
  • 【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=" 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 

    界面效果:

  • 相关阅读:
    RUST实践.md
    redis.md
    opencvrust.md
    aws rds can't connect to mysql server on 'xx'
    Foundation ActionScript 3.0 With Flash CS3 And Flex
    Foundation Flash Applications for Mobile Devices
    Flash Mobile Developing Android and iOS Applications
    Flash Game Development by Example
    Actionscript 3.0 迁移指南
    在SWT中非UI线程控制界面
  • 原文地址:https://www.cnblogs.com/sxdcgaq8080/p/6085456.html
Copyright © 2011-2022 走看看