zTree树实现用户权限管理

最新推荐文章于 2021-06-09 11:45:20 发布

雨夜杀魂

最新推荐文章于 2021-06-09 11:45:20 发布

阅读量3k

点赞数

分类专栏： java相关文章标签： ztree 权限管理

本文链接：https://blog.csdn.net/yuyeshahun/article/details/78756564

版权

java相关专栏收录该内容

6 篇文章 0 订阅

订阅专栏

记—>踩过的坑

工程环境：maven工程（ssm框架），pom.xml配置<resources> <resource> <directory>src/main/java</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> </includes> </resource>  <resource> <directory>src/main/resources</directory> <includes> <include>**/*</include> </includes> </resource> </resources>
mybatis生成器：实体使用myBatis逆向工程生成器（版本mybatis-generator-core-1.3.2-bundle，注意事项：ztree树的节点属性pId要求’I’是大写，所以在生成pojo的时候要确保数据库中的”pid”数据以”p_id”格式书写，否则加载出来的树没有根节点）生成。
zTree的选择是版本zTree-zTree-v3.5.16-0。
几个常用的方法：getNodesByParam(“pId”,tree.pNode.id);（获取符合pId为某一特定值的已经加载树的节点数组）
初始化树 $.fn.zTree.init($(“#treeDemo”), tree._setting, data);
选中的数据提交到后台获取数据问题：$.fn.zTree.getZTreeObj(“treeDemo”).getCheckedNodes(true);可以获取选中的复选框的节点集合，遍历集合获取id，通过ajax发送到后台保存
zTreeObj = $.fn.zTree.init($(“#tree”), setting, zTreeNodes);
$(“#tree”)要生成的树标签，setting树的设置，zTreeNodes生成树的根节点。$.fn.zTree.getZTreeObj(“treeDemo”).addNodes(tree.pNode, data,true); 树上的指定节点添加节点

附：

js代码

/**
 * 点击事件加载树
 */
var tree = {
    pNode : '',
    pUid:'',
    _setting : {
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "ps", "N": "ps" }
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback : {
            onExpand: function(event, treeId, treeNode){
                tree.pNode = treeNode;
                tree.loadNodesByPid();
            },
            onRightClick: function(event, treeId, treeNode){
                //tree.zTreeOnRightClick();
                tree.addHoverDom(treeId, treeNode);
            }
        },
        view : {
            addHoverDom: function(treeId, treeNode){
//              alert(treeId);
//              alert(treeNode);
                tree.addHoverDom(treeId, treeNode);
            },
            removeHoverDom: function(treeId, treeNode){
                //tree.removeHoverDom(treeId, treeNode);
            }
        }
    },
    //添加悬浮框
    addHoverDom : function(treeId, treeNode) {
        //alert(treeId);
        var aObj = $("#" + treeNode.tId + "_a");
        if ($("#addNode"+treeNode.id).length>0) return false;
//      var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span>"
//          + "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id
//          + "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";
        var editStr = '<span id = "addNode">添加节点<span>'
        aObj.append(editStr);
        var btn = $("#addNode"+treeNode.id);
        if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
    },
    //移除悬浮框
    removeHoverDom : function(treeId, treeNode) {
        $("#diyBtn_"+treeNode.id).unbind().remove();
        $("#diyBtn_space_" +treeNode.id).unbind().remove();
    },

    //右击事件
    zTreeOnRightClick : function(event, treeId, treeNode){
        alert();
    },
    //加载节点（点击事件加载树）
    loadNodesByPid : function(){
        var parameter = {
                pid:tree.pNode.id,
                uid:tree.pUid
        };
        //根据节点数据的属性搜索，获取条件完全匹配的节点数据 JSON 对象集合
        //获取符合pId为某一特定值的已经加载树的节点数组（数组判空可以根据长度判断）
        var nodes = $.fn.zTree.getZTreeObj("treeDemo").getNodesByParam("pId",tree.pNode.id);
        if(nodes.length==0){
            $.get("/showMenu",parameter,function(data){
                $.fn.zTree.getZTreeObj("treeDemo").addNodes(tree.pNode, data,true);
            },"json")
        }
    },
    //加载根节点（点击事件加载树）
    loadRootNodes : function(uid){
        tree.pUid = uid;
        var parameter = {
            pid:0,
            uid:uid
        };
        $.get("/showMenu",parameter,function(data){
        //$.get("/showAllMenu",function(data){//一次性加载树
            tree._setting.check.enable=true;
            $.fn.zTree.init($("#treeDemo"), tree._setting, data);
        },"json")
    },
    //一次性加载树
    loadAllNodes : function(){
        $.get("/showAllMenu",function(data){
            tree._setting.check.enable=false;
            $.fn.zTree.init($("#treeDemo"), tree._setting, data);
        },"json")
    }
};
$().ready(function(){
    updateMenu = function(){
        tree.loadAllNodes();
    };
    //设置权限
    setPrivilege = function(uid){
        //加载树的根节点
        tree.loadRootNodes(uid);
    };
    //保存权限到服务端
    savePrivilege = function(id){
        var tt = $.fn.zTree.getZTreeObj("treeDemo");
        if(tt != null){

            var nodes = tt.getCheckedNodes(true);
            var str = '';
            //要对数据进行处理
            $(nodes).each(function(){
                str += this.id+",";
            });

            $.post("/getTree",{'str':str,'uid':id},function(data){

            },"text");
        }
    };
});

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - checkbox</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="/jq-ztree3.5/css/demo.css" type="text/css">
    <link rel="stylesheet" href="/jq-ztree3.5/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="/jq-ztree3.5/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/jq-ztree3.5/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="/jq-ztree3.5/js/jquery.ztree.excheck-3.5.js"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/js/menu.js"></script>
    <style type="text/css">
        body{
            background: #122B40;                
        }
        .myClass{
            margin-top: 10%;
            border: 1px solid black;
            box-shadow: skyblue 8px 4px 8px;
            border-radius: 10px; 
            background: white;          
        }
        a{
            text-decoration: none;              
        }
        a:active{
            color: blue;
        }
        table{
            margin-top: 10px;
        }
    </style>
</HEAD>

<BODY>
    <div class="container">
        <div class="row">
            <div align="center" class="col-xs-5 myClass">
                <table align="center" class="table table-bordered table-condensed">
                    <tr>
                        <td>序号</td> 
                        <td>用户姓名</td>
                        <td>权限管理</td>
                    </tr>
                    <c:forEach items="${userList }" var="user" varStatus="o">
                        <tr>
                            <td>${o.index+1}</td>
                            <td>${user.name}</td>
                            <c:if test="${user.name == 'admin'}">
                                <td><a href="javascript:;" onclick="updateMenu();">修改菜单</a></td>
                            </c:if>
                            <c:if test="${user.name != 'admin'}">
                                <td><a href="javascript:;" onclick="setPrivilege('${user.userid}');">设置权限</a></td>
                                <td><a href="javascript:;" onclick="savePrivilege('${user.userid}');">保存权限</a></td>
                            </c:if>
                        </tr>
                    </c:forEach>
                </table>
            </div>
            <div class="col-xs-1"></div>
            <div align="center" class="col-xs-6 myClass">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>
</BODY>
</HTML>

sql

-- --------------------------------------------------------
-- 主机:                           127.0.0.1
-- 服务器版本:                        5.5.40 - MySQL Community Server (GPL)
-- 服务器操作系统:                      Win64
-- HeidiSQL 版本:                  8.2.0.4675
-- --------------------------------------------------------

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET NAMES utf8 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;

-- 导出 privilege 的数据库结构
CREATE DATABASE IF NOT EXISTS `privilege` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `privilege`;


-- 导出  表 privilege.menu 结构
CREATE TABLE IF NOT EXISTS `menu` (
  `id` int(10) NOT NULL COMMENT '当前节点的id',
  `name` varchar(50) NOT NULL COMMENT '当前节点名称',
  `p_id` int(10) NOT NULL COMMENT '当前节点的父节点id',
  `is_parent` int(1) NOT NULL COMMENT '当前节点是否是父节点',
  `open` int(1) NOT NULL COMMENT '当前节点打开状态',
  `checked` int(1) NOT NULL COMMENT '当前节点选中状态',
  `url` varchar(500) DEFAULT NULL COMMENT '节点的超链接',
  `icon` varchar(500) DEFAULT NULL COMMENT '节点的图标链接',
  `target` varchar(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='权限菜单';

-- 正在导出表  privilege.menu 的数据：~5 rows (大约)
DELETE FROM `menu`;
/*!40000 ALTER TABLE `menu` DISABLE KEYS */;
INSERT INTO `menu` (`id`, `name`, `p_id`, `is_parent`, `open`, `checked`, `url`, `icon`, `target`) VALUES
    (1, '办公管理系统', 0, 1, 0, 0, NULL, '../jq-ztree3.5/MenuIcon/FUNC20082.gif', NULL),
    (2, '用户管理', 1, 1, 0, 0, NULL, '../jq-ztree3.5/css/zTreeStyle/img/diy/user.gif', NULL),
    (3, '部门管理', 1, 0, 0, 0, NULL, '../jq-ztree3.5/MenuIcon/department.gif', NULL),
    (21, '权限管理', 2, 0, 0, 0, NULL, '../jq-ztree3.5/MenuIcon/FUNC20001.gif', NULL),
    (4, '知识管理', 1, 0, 0, 0, 'http://localhost:8081/showAllMenu', '../jq-ztree3.5/MenuIcon/FUNC20056.gif', '_self');
/*!40000 ALTER TABLE `menu` ENABLE KEYS */;


-- 导出  表 privilege.user 结构
CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `userid` varchar(50) COLLATE utf8_bin NOT NULL,
  `name` varchar(50) COLLATE utf8_bin NOT NULL,
  `password` varchar(50) COLLATE utf8_bin NOT NULL,
  KEY `id` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

-- 正在导出表  privilege.user 的数据：~4 rows (大约)
DELETE FROM `user`;
/*!40000 ALTER TABLE `user` DISABLE KEYS */;
INSERT INTO `user` (`id`, `userid`, `name`, `password`) VALUES
    (1, '3b40b3585883458fb952315703cc1d95', 'admin', 'admin'),
    (18, '3b40b3585883458fb952315703cc1d97', 'lsl', '123'),
    (19, '3b40b3585883458fb952315703cc1d98', '张三', '123'),
    (20, '3b40f3585883458fb952315703cc1d97', '&lt;', '123');
/*!40000 ALTER TABLE `user` ENABLE KEYS */;


-- 导出  表 privilege.userprivilege 结构
CREATE TABLE IF NOT EXISTS `userprivilege` (
  `uid` varchar(50) NOT NULL COMMENT '用户标识',
  `mid` varchar(100) NOT NULL COMMENT '菜单id集合，以逗号分隔符区分'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- 正在导出表  privilege.userprivilege 的数据：~3 rows (大约)
DELETE FROM `userprivilege`;
/*!40000 ALTER TABLE `userprivilege` DISABLE KEYS */;
INSERT INTO `userprivilege` (`uid`, `mid`) VALUES
    ('3b40b3585883458fb952315703cc1d95', '1,3,4'),
    ('3b40b3585883458fb952315703cc1d97', '1,2'),
    ('3b40b3585883458fb952315703cc1d98', '1,3');
/*!40000 ALTER TABLE `userprivilege` ENABLE KEYS */;
/*!40101 SET SQL_MODE=IFNULL(@OLD_SQL_MODE, '') */;
/*!40014 SET FOREIGN_KEY_CHECKS=IF(@OLD_FOREIGN_KEY_CHECKS IS NULL, 1, @OLD_FOREIGN_KEY_CHECKS) */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;