zTree - jQuery 树插件 的 简单介绍

玩 zTree - jQuery  树插件 的 简单操作

  1. 参考API： http://www.treejs.cn/v3/api.php

  2. 下载zTree相关文件：css 、js

  3. 书写前台页面(jsp页面示例)：　　

    1. main.jsp   进入时显示页面（分成三部分）
      <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
      <!      DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>main</title>
    </head>
    <frameset rows="13%,*">
        <frame src="toTitle.do" name="title" frameborder="0" noresize="noresize" marginwidth="0" marginheight="0">
        <frameset cols="16%,*">
            <frame src="toMenu.do" name="menu" frameborder="0" noresize="noresize" marginwidth="0" marginheight="0">
            <frame src="toContent.do" name="content" frameborder="0" noresize="noresize" marginwidth="0" marginheight="0">
        </frameset>
    </frameset>
</html>
    2. title.jsp    （上）
       1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 3 <html>
 4     <head>
 5         <title>My JSP 'title.jsp' starting page</title>
 6         <script type="text/javascript" src="<%=request.getContextPath()%>/jQuery/jquery-1.8.2.js"></script>
 7         <script type="text/javascript">
 8             function logout(){
 9                 window.parent.location.href = "../user/logout.do";
10             }
11         </script>
12     </head>
13     <body style="background-image: url('<%=request.getContextPath()%>/zTree/css/zTreeStyle/img/01.png');width: 1100px;">
14         <div>
15             <input type="button" value="注销" onclick="logout()" style="border: none;background: transparent;color:white;float:right;margin-top:40px;margin-left: 200px;">
16             <h3 style="color: FFFFFF;float:left;margin-top: 10px;margin-left: 300px;">
17                 欢迎
18                     <span style="color: yellow;font-size: 15;">${user.rname}</span>
19                 登录
20             </h3>
21         </div>
22     </body>
23 </html>
    3. menu.jsp （左---ztree部分）
       1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 7 <html>
 8     <head>
 9         <title>My JSP 'menu.jsp' starting page</title>
10         <link rel="stylesheet" type="text/css" href="<%=path %>/zTree/css/zTreeStyle/zTreeStyle.css">
11         <script type="text/javascript" src="<%=path %>/jQuery/jquery-1.8.2.js"></script>
12         <script type="text/javascript" src="<%=path %>/zTree/js/jquery.ztree.core.js"></script>
13         <script type="text/javascript" src="<%=path %>/zTree/js/jquery.ztree.excheck.js"></script>
14         <script type="text/javascript" src="<%=path %>/zTree/js/jquery.ztree.exedit.js"></script>
15         <script type="text/javascript">
16             var zTreeObj,
17             setting = {
18                 async:{
19                     enable:true,
20                     url:"list.do"
21                 },
22                 view:{
23                     selectedMulti:false,
24                     showTitle:false,
25                     showLine:false
26                 },
27                 data:{
28                     simpleData:{
29                         enable:true,
30                         idKey:"id",
31                         pIdKey:"pid",
32                         rootPId:0
33                     }
34                 }
35             },
36             zTreeNodes;
37             $(document).ready(function (){
38                 zTreeObj=$.fn.zTree.init($("#tree"),setting,zTreeNodes);
39             });
40             
41         </script>
42     </head>
43     <body style="background-image: url('<%=request.getContextPath()%>/zTree/css/zTreeStyle/img/6.jpg');width: 10px;">
44         <ul id="tree" class="ztree" style="width: 180px;overflow: auto;"></ul>
45     </body>
46 </html>
    4. content.jsp （显示数据页面）
       1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 3 <html>
 4     <head>
 5         <title>content</title>
 6         <meta http-equiv="Content-Type" content="text/html;charset:UTF-8" >
 7     </head>
 8     <body>
 9         <img src="<%=request.getContextPath()%>/zTree/css/zTreeStyle/img/right2.png" style=" width:1170px;height:580px;">
10     </body>
11 </html>
    5. 权限修改页面menuPower.jsp 
        1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%
  3     String path = request.getContextPath();
  4     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
  5             + path + "/";
  6 %>
  7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8 <html>
  9 <head>
 10 <title>My JSP 'menu.jsp' starting page</title>
 11 <link rel="stylesheet" type="text/css" href="<%=path%>/css/index.css">
 12 <link rel="stylesheet" type="text/css" href="<%=path%>/zTree/css/zTreeStyle/zTreeStyle.css">
 13 <script type="text/javascript" src="<%=path%>/jQuery/jquery-1.8.2.js"></script>
 14 <script type="text/javascript" src="<%=path%>/zTree/js/jquery.ztree.core.js"></script>
 15 <script type="text/javascript" src="<%=path%>/zTree/js/jquery.ztree.excheck.js"></script>
 16 <script type="text/javascript" src="<%=path%>/zTree/js/jquery.ztree.exedit.js"></script>
 17 <script type="text/javascript">
 18     var zTreeObj,
 19         setting = {
 20             async : {
 21                 enable : true,
 22                 url : "list.do",
 23             },
 24             view : {
 25                 selectedMulti : false,
 26                 showTitle : false,
 27                 showLine : false
 28             },
 29             data : {
 30                 simpleData : {
 31                     enable : true,
 32                     idKey : "id",
 33                     pIdKey : "pId",
 34                     rootPId : 0,
 35                     open : true
 36                 },
 37                 key : {
 38                     url : "aaa"
 39                 }
 40             },
 41             check : {
 42                 enable : true
 43             }
 44         },
 45         zTreeNodes;
 46     $(document).ready(function() {
 47         //初始化ztree
 48         zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
 49         //设置角色对应菜单的回显
 50         var rid = $("[name=rid]").val();
 51         $.ajax({
 52             url : "../user/roleByPower.do",
 53             data : {
 54                 rid : rid
 55             },
 56             type : "post",
 57             dataType : "json",
 58             async : false,
 59             success : function(obj) {
 60                 if (obj.length > 0) {
 61                     //回显复选框
 62                     //1.获取ztree对象
 63                     var treeObj = $.fn.zTree.getZTreeObj("tree");
 64                     for (var i in obj) {
 65                         //2.选择节点数据
 66                         node = treeObj.getNodeByParam("id", obj[i].mid);
 67                         //3.回显复选框
 68                         treeObj.checkNode(node, true, false);
 69                     }
 70                 }
 71             }
 72         });
 73     });
 74 
 75     function getUserPower() {
 76         var rid = $("[name=rid]").val();
 77         var treeObj = $.fn.zTree.getZTreeObj("tree");
 78         var nodes = treeObj.getCheckedNodes(true);
 79         if (nodes.length > 0) {
 80             var ids = "";
 81             for (var i in nodes) {
 82                 ids += "," + nodes[i].id;
 83             }
 84             ids = ids.substring(1);
 85             $.post(
 86                 "../user/getRolePower.do",
 87                 {
 88                     rid : rid,
 89                     mids : ids
 90                 },
 91                 function(obj) {
 92                     if (obj) {
 93                         alert("授权成功!");
 94                         location.href = "../user/rolelist.do";
 95                     } else {
 96                         alert("授权失败!");
 97                     }
 98                 },
 99                 "json"
100             );
101         }
102 
103     }
104 </script>
105 </head>
106 <body>
107     <table style="width: 200px;height: 450px;margin: 0 auto;">
108         <tr>
109             <td><input type="hidden" value="${param.rid}" name="rid">
110                 <span>职位名称:${param.rname}</span></td>
111         </tr>
112         <tr>
113             <td>
114                 <ul id="tree" class="ztree" style="width: 180px;overflow: auto;"></ul>
115             </td>
116         </tr>
117         <tr>
118             <td><input type="button" value="授权提交" onclick="getUserPower()">
119             </td>
120         </tr>
121     </table>
122 </body>
123 </html>

  4. 后台查询ztree列表

  5. 数据库建表信息：    
    1. id编号　　
    2. name 名称　　
    3. pid 父级编号 　　
    4. url 跳转路径 　　
    5. target 显示页面　
    6. icon 节点显示的样式图片路径　
    7. iconClose 收起节点时的样式图片路径
    8. iconOpen 打开节点时的样式图片路径
    9. open 默认是否打开（true / false）
posted @ 2018-12-20 20:02  Dylan_G  阅读(282)  评论(0)    收藏  举报