使用zTree树不是第一次了 但是 还是翻阅着之前做的 对照着 使用起来比较方便 这里就把小例子列出来 总结一下使用步骤 这样方便下次使用起来方便一点
使用zTree树的步骤：
1.首先 在jsp中引用zTree相关的 CSS文件和JS文件
2.其次 在jsp中设置zTree的容器，一般一个<ul ></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>