完成菜单管理

This commit is contained in:
shuzheng 2017-03-18 22:39:09 +08:00
parent 43b57725b9
commit 474b80c97d
3 changed files with 421 additions and 0 deletions

View File

@ -0,0 +1,102 @@
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<div id="createDialog" class="crudDialog">
<form id="createForm" method="post">
<div class="form-group">
<label for="pid">上级</label>
<input id="pid" type="text" class="form-control" name="pid" maxlength="20">
</div>
<div class="form-group">
<label for="name">名称</label>
<input id="name" type="text" class="form-control" name="name" maxlength="20">
</div>
<div class="form-group">
<label for="url">链接</label>
<input id="url" type="text" class="form-control" name="url" maxlength="100">
</div>
<div class="form-group">
<select id="target" name="target" style="width: 100%">
<option value="_self">当前窗口打开</option>
<option value="_blank">新窗口打开</option>
</select>
</div>
<div class="form-group text-right dialog-buttons">
<a class="waves-effect waves-button" href="javascript:;" onclick="createSubmit();">保存</a>
<a class="waves-effect waves-button" href="javascript:;" onclick="createDialog.close();">取消</a>
</div>
</form>
</div>
<script>
function createSubmit() {
$.ajax({
type: 'post',
url: '${basePath}/manage/menu/create',
data: $('#createForm').serialize(),
beforeSend: function() {
if ($('#name').val() == '') {
$('#name').focus();
return false;
}
},
success: function(result) {
if (result.code != 1) {
if (result.data instanceof Array) {
$.each(result.data, function(index, value) {
$.confirm({
theme: 'dark',
animation: 'rotateX',
closeAnimation: 'rotateX',
title: false,
content: value.errorMsg,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button waves-light'
}
}
});
});
} else {
$.confirm({
theme: 'dark',
animation: 'rotateX',
closeAnimation: 'rotateX',
title: false,
content: result.data.errorMsg,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button waves-light'
}
}
});
}
} else {
createDialog.close();
$table.bootstrapTable('refresh');
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$.confirm({
theme: 'dark',
animation: 'rotateX',
closeAnimation: 'rotateX',
title: false,
content: textStatus,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button waves-light'
}
}
});
}
});
}
</script>

View File

@ -0,0 +1,217 @@
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!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">
<title>菜单管理</title>
<jsp:include page="/resources/inc/head.jsp" flush="true"/>
</head>
<body>
<div id="main">
<div id="toolbar">
<shiro:hasPermission name="cms:menu:create"><a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i> 新增菜单</a></shiro:hasPermission>
<shiro:hasPermission name="cms:menu:update"><a class="waves-effect waves-button" href="javascript:;" onclick="updateAction()"><i class="zmdi zmdi-edit"></i> 编辑菜单</a></shiro:hasPermission>
<shiro:hasPermission name="cms:menu:delete"><a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"><i class="zmdi zmdi-close"></i> 删除菜单</a></shiro:hasPermission>
<shiro:hasPermission name="cms:menu:up"><a class="waves-effect waves-button" href="javascript:;" onclick="upAction()"><i class="zmdi zmdi-long-arrow-up"></i> 上移菜单</a></shiro:hasPermission>
<shiro:hasPermission name="cms:menu:down"><a class="waves-effect waves-button" href="javascript:;" onclick="downAction()"><i class="zmdi zmdi-long-arrow-down"></i> 下移菜单</a></shiro:hasPermission>
</div>
<table id="table"></table>
</div>
<jsp:include page="/resources/inc/footer.jsp" flush="true"/>
<script>
var $table = $('#table');
$(function() {
// bootstrap table初始化
$table.bootstrapTable({
url: '${basePath}/manage/menu/list',
height: getHeight(),
striped: true,
search: true,
showRefresh: true,
showColumns: true,
minimumCountColumns: 2,
clickToSelect: true,
detailView: true,
detailFormatter: 'detailFormatter',
pagination: true,
paginationLoop: false,
sidePagination: 'server',
silentSort: false,
smartDisplay: false,
escape: true,
searchOnEnterKey: true,
idField: 'menuId',
maintainSelected: true,
toolbar: '#toolbar',
columns: [
{field: 'ck', checkbox: true},
{field: 'menuId', title: '编号', sortable: true, align: 'center'},
{field: 'pid', title: '父菜单'},
{field: 'name', title: '名称'},
{field: 'url', title: '链接'},
{field: 'target', title: '打开方式', formatter: 'targetFormatter'}
]
});
});
// 格式化打开方式
function targetFormatter(value, row, index) {
if (value == '_self') {
return '<span class="label label-primary">当前窗口</span>';
}
if (value == '_blank') {
return '<span class="label label-danger">新窗口</span>';
}
}
// 新增
var createDialog;
function createAction() {
createDialog = $.dialog({
animationSpeed: 300,
title: '新增菜单',
content: 'url:${basePath}/manage/menu/create',
onContentReady: function () {
initMaterialInput();
$('select').select2();
}
});
}
// 编辑
var updateDialog;
function updateAction() {
var rows = $table.bootstrapTable('getSelections');
if (rows.length != 1) {
$.confirm({
title: false,
content: '请选择一条记录!',
autoClose: 'cancel|3000',
backgroundDismiss: true,
buttons: {
cancel: {
text: '取消',
btnClass: 'waves-effect waves-button'
}
}
});
} else {
updateDialog = $.dialog({
animationSpeed: 300,
title: '编辑菜单',
content: 'url:${basePath}/manage/menu/update/' + rows[0].menuId,
onContentReady: function () {
initMaterialInput();
$('select').select2();
}
});
}
}
// 删除
var deleteDialog;
function deleteAction() {
var rows = $table.bootstrapTable('getSelections');
if (rows.length == 0) {
$.confirm({
title: false,
content: '请至少选择一条记录!',
autoClose: 'cancel|3000',
backgroundDismiss: true,
buttons: {
cancel: {
text: '取消',
btnClass: 'waves-effect waves-button'
}
}
});
} else {
deleteDialog = $.confirm({
type: 'red',
animationSpeed: 300,
title: false,
content: '确认删除该菜单吗?',
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button',
action: function () {
var ids = new Array();
for (var i in rows) {
ids.push(rows[i].menuId);
}
$.ajax({
type: 'get',
url: '${basePath}/manage/menu/delete/' + ids.join("-"),
success: function(result) {
if (result.code != 1) {
if (result.data instanceof Array) {
$.each(result.data, function(index, value) {
$.confirm({
theme: 'dark',
animation: 'rotateX',
closeAnimation: 'rotateX',
title: false,
content: value.errorMsg,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button waves-light'
}
}
});
});
} else {
$.confirm({
theme: 'dark',
animation: 'rotateX',
closeAnimation: 'rotateX',
title: false,
content: result.data.errorMsg,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button waves-light'
}
}
});
}
} else {
deleteDialog.close();
$table.bootstrapTable('refresh');
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$.confirm({
theme: 'dark',
animation: 'rotateX',
closeAnimation: 'rotateX',
title: false,
content: textStatus,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button waves-light'
}
}
});
}
});
}
},
cancel: {
text: '取消',
btnClass: 'waves-effect waves-button'
}
}
});
}
}
</script>
</body>
</html>

View File

@ -0,0 +1,102 @@
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<div id="updateDialog" class="crudDialog">
<form id="updateForm" method="post">
<div class="form-group">
<label for="pid">上级</label>
<input id="pid" type="text" class="form-control" name="pid" maxlength="20" value="${menu.pid}">
</div>
<div class="form-group">
<label for="name">名称</label>
<input id="name" type="text" class="form-control" name="name" maxlength="20" value="${menu.name}">
</div>
<div class="form-group">
<label for="url">链接</label>
<input id="url" type="text" class="form-control" name="url" maxlength="100" value="${menu.url}">
</div>
<div class="form-group">
<select id="target" name="target" style="width: 100%">
<option value="_self" <c:if test="${menu.target=='_self'}">selected</c:if>>当前窗口打开</option>
<option value="_blank" <c:if test="${menu.target=='_blank'}">selected</c:if>>新窗口打开</option>
</select>
</div>
<div class="form-group text-right dialog-buttons">
<a class="waves-effect waves-button" href="javascript:;" onclick="createSubmit();">保存</a>
<a class="waves-effect waves-button" href="javascript:;" onclick="updateDialog.close();">取消</a>
</div>
</form>
</div>
<script>
function createSubmit() {
$.ajax({
type: 'post',
url: '${basePath}/manage/menu/update/${menu.menuId}',
data: $('#updateForm').serialize(),
beforeSend: function() {
if ($('#name').val() == '') {
$('#name').focus();
return false;
}
},
success: function(result) {
if (result.code != 1) {
if (result.data instanceof Array) {
$.each(result.data, function(index, value) {
$.confirm({
theme: 'dark',
animation: 'rotateX',
closeAnimation: 'rotateX',
title: false,
content: value.errorMsg,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button waves-light'
}
}
});
});
} else {
$.confirm({
theme: 'dark',
animation: 'rotateX',
closeAnimation: 'rotateX',
title: false,
content: result.data.errorMsg,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button waves-light'
}
}
});
}
} else {
updateDialog.close();
$table.bootstrapTable('refresh');
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$.confirm({
theme: 'dark',
animation: 'rotateX',
closeAnimation: 'rotateX',
title: false,
content: textStatus,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button waves-light'
}
}
});
}
});
}
</script>