zTree树实现用户权限管理

记—>踩过的坑

工程环境：maven工程（ssm框架），pom.xml配置

<resources>

<resource>

<directory>src/main/java</directory>

<includes>

<include>**/*.properties</include>

<include>**/*.xml</include>

</includes>

</resource>

<!--不分子模块情况下为了扫描到src/main下的的mapper.xml配置以上代码会导致web容器加载不了spring的监听器，也就是这段代码会导致spring的配置加载不了，此时需要加入以下代码就可以扫描src/main/resources路径下的Spring配置文件了-->

<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){

4000
//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', '<', '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 */;