只有前端的页面和JS没有后台,数据库表的结构看图,页面使用了layer和ztree自行拷贝官方的js和css文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<script type="text/javascript">
$(function() {
$(".list-group-item").click(function() {
if ($(this).find("ul")) {
$(this).toggleClass("tree-closed");
if ($(this).hasClass("tree-closed")) {
$("ul", this).hide("fast");
} else {
$("ul", this).show("fast");
}
}
});
initMenuTree();
});
function initMenuTree(){
/* 对树插件的配置信息 */
var setting = {
data: {
simpleData: {
enable: true,
pIdKey: "pid"
}
} ,
view: {
//用于在节点上固定显示用户自定义控件
addDiyDom: function(treeId, treeNode){
//treeNode 一个菜单节点
$("#" + treeNode.tId + "_ico").removeClass();//.addClass();
$("#" + treeNode.tId + "_ico").addClass(treeNode.icon);
//$("#" + treeNode.tId + "_span").before("<span class='"+treeNode.icon+"'></span>");
//点击不跳转
var aObj = $("#" + treeNode.tId + "_a");
aObj.attr("href", "javascript:;");
aObj.attr("target", "_self");
},
addHoverDom: function(treeId, treeNode){
var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")
//如果已经有了按钮组 就不进行构建按钮组
if (treeNode.editNameFlag || $("#btnGroup"+treeNode.tId).length>0) return;
//按钮组
var s = '<span id="btnGroup'+treeNode.tId+'">';
//根节点
if ( treeNode.level == 0 ) {
//增加按钮 传入当前节点Id
s += '<a onclick="addBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" > <i class="fa fa-fw fa-plus rbg "></i></a>';
}
//二级节点
else if ( treeNode.level == 1 ) {
//修改按钮
s += '<a onclick="updateBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" title="修改权限信息"> <i class="fa fa-fw fa-edit rbg "></i></a>';
//增加按钮
s += '<a onclick="addBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" > <i class="fa fa-fw fa-plus rbg "></i></a>';
if (treeNode.children.length == 0) {
//删除按钮
s += '<a onclick="deleteBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" > <i class="fa fa-fw fa-times rbg "></i></a>';
}
}
//三级节点
else if ( treeNode.level == 2 ) {
//修改按钮
s += '<a onclick="updateBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" title="修改权限信息"> <i class="fa fa-fw fa-edit rbg "></i></a>';
//删除按钮
s += '<a onclick="deleteBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#"> <i class="fa fa-fw fa-times rbg "></i></a>';
}
s += '</span>';
aObj.append(s);
},
removeHoverDom: function(treeId, treeNode){
$("#btnGroup"+treeNode.tId).remove();
}
}
};
//查询所有的树节点
$.ajax({
type: "GET",
url: "${PATH}/menu/queryMenus",
data: {},
success: function (retVal) {
var zNodes = retVal;
zNodes.push({
id:0,
name:'系统菜单'
})
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.expandAll(true);
}
});
}
function addBtn(id){
$('#addModal').modal({
show:true,
//防止鼠标按妞按下去模态框消失
backdrop:'static',
//防止ESC按下去模态框消失
keyboard:true
});
var pid=$("#addModal input[name='pid']").val(id);
}
$("#saveBtn").click(function(){
var pid=$("#addModal input[name='pid']").val();
var name=$("#addModal input[name='name']").val();
var url=$("#addModal input[name='url']").val();
var icon=$("#addModal input[name='icon']").val();
$.ajax({
type: "post",
url: "${PATH}/menu/addMenu",
data: {pid:pid,name:name,url:url,icon:icon},
success: function (retVal) {
if(retVal=="ok"){
layer.msg("保存成功", {
time: 1000,
icon: 6
}, function () {
//1.关掉模态框
$("#addModal").modal('hide');
//2.刷新角色列表
initMenuTree();
//3.把输入框设置为空
var pid=$("#addModal input[name='pid']").val('');
var name=$("#addModal input[name='name']").val('');
var url=$("#addModal input[name='url']").val('');
var icon=$("#addModal input[name='icon']").val('');
});
}else{
layer.msg('菜单保存失败',{
time: 1000,
icon: 5
});
}
}
});
});
function updateBtn(id){
$('#updateModal').modal({
show:true,
//防止鼠标按妞按下去模态框消失
backdrop:'static',
//防止ESC按下去模态框消失
keyboard:true
});
$.ajax({
type: "post",
url: "${PATH}/menu/queryMenuById",
data: {id:id},
success: function (retVal) {
if(retVal!=null){
$("#updateModal input[name='id']").val(retVal.id);
$("#updateModal input[name='name']").val(retVal.name);
$("#updateModal input[name='url']").val(retVal.url);
$("#updateModal input[name='icon']").val(retVal.icon);
}else{
layer.msg("查询失败", {
time: 1000,
icon: 6
});
}
}
});
}
$("#updateBtn").click(function(){
var id=$("#updateModal input[name='id']").val();
var name=$("#updateModal input[name='name']").val();
var url=$("#updateModal input[name='url']").val();
var icon=$("#updateModal input[name='icon']").val();
$.ajax({
type: "post",
url: "${PATH}/menu/updateMenu",
data: {id:id,name:name,url:url,icon:icon},
success: function (retVal) {
if(retVal=="ok"){
layer.msg("修改成功", {
time: 1000,
icon: 6
}, function () {
//1.关掉模态框
$("#updateModal").modal('hide');
//2.刷新角色列表
initMenuTree();
});
}else{
layer.msg('菜单修改失败',{
time: 1000,
icon: 5
});
}
}
});
});
function deleteBtn(id){
layer.confirm('确认删除????', {
btn: ['确认','取消'] //按钮
}, function(index){
$.ajax({
type: "post",
url: "${PATH}/menu/deleteMenu",
data: {id:id},
success: function (retVal) {
if(retVal=="ok"){
layer.msg("删除成功", {
time: 1000,
icon: 6
}, function () {
initMenuTree();
});
}else{
layer.msg("菜单删除失败",{
time: 1000,
icon: 5
});
}
}
});
layer.close(index);//关闭弹窗
});
}
</script>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<%@ include file="/WEB-INF/jsp/common/css.jsp"%>
</head>
<body>
<jsp:include page="/WEB-INF/jsp/common/top.jsp"></jsp:include>
<div class="container-fluid">
<div class="row">
<jsp:include page="/WEB-INF/jsp/common/sidebar.jsp"></jsp:include>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="glyphicon glyphicon-th"></i> 菜单树
</h3>
</div>
<div class="panel-body">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
</div>
</div>
<!-- 添加数据 模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">添加菜单</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name">菜单名称</label> <input type="hidden" name="pid"> <input type="text" class="form-control" id="name" name="name" placeholder="请输入菜单名称">
</div>
<div class="form-group">
<label for="url">菜单URL</label> <input type="text" class="form-control" id="url" name="url" placeholder="请输入菜单URL">
</div>
<div class="form-group">
<label for="icon">菜单图标</label> <input type="text" class="form-control" id="icon" name="icon" placeholder="请输入菜单图标">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="saveBtn" type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 更新数据 模态框 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">修改菜单</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name">菜单名称</label> <input type="hidden" name="id"> <input type="text" class="form-control" id="name" name="name" placeholder="请输入菜单名称">
</div>
<div class="form-group">
<label for="url">菜单URL</label> <input type="text" class="form-control" id="url" name="url" placeholder="请输入菜单URL">
</div>
<div class="form-group">
<label for="icon">菜单图标</label> <input type="text" class="form-control" id="icon" name="icon" placeholder="请输入菜单图标">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="updateBtn" type="button" class="btn btn-primary">修改</button>
</div>
</div>
</div>
</div>
<%@ include file="/WEB-INF/jsp/common/js.jsp"%>
<%@ include file="/WEB-INF/jsp/menu/function.jsp" %>
</body>
</html>
模态框(layer的东西)
这个东西还挺好用的不用自己再写一个添加修改的页面,直接在当前页面进行数据的添加和修改,
样板:
<!-- 添加数据 模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">添加菜单</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name">菜单名称</label> <input type="hidden" name="pid"> <input type="text" class="form-control" id="name" name="name" placeholder="请输入菜单名称">
</div>
<div class="form-group">
<label for="url">菜单URL</label> <input type="text" class="form-control" id="url" name="url" placeholder="请输入菜单URL">
</div>
<div class="form-group">
<label for="icon">菜单图标</label> <input type="text" class="form-control" id="icon" name="icon" placeholder="请输入菜单图标">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="saveBtn" type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 更新数据 模态框 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">修改菜单</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name">菜单名称</label> <input type="hidden" name="id"> <input type="text" class="form-control" id="name" name="name" placeholder="请输入菜单名称">
</div>
<div class="form-group">
<label for="url">菜单URL</label> <input type="text" class="form-control" id="url" name="url" placeholder="请输入菜单URL">
</div>
<div class="form-group">
<label for="icon">菜单图标</label> <input type="text" class="form-control" id="icon" name="icon" placeholder="请输入菜单图标">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="updateBtn" type="button" class="btn btn-primary">修改</button>
</div>
</div>
</div>
</div>