完成类目管理

This commit is contained in:
shuzheng 2017-03-15 23:14:02 +08:00
parent e9353f8b60
commit d56f06debb
6 changed files with 464 additions and 143 deletions

View File

@ -1,41 +0,0 @@
<%@ 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"%>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>新增</title>
</head>
<body>
<div>
<a href="${basePath}/manage/index">首页</a> &gt; <a href="${basePath}/manage/category/list">类目列表</a> &gt; 新增
</div>
<div>
<form method="post">
<table border="1">
<tr><td>上级编号:</td><td><input type="text" name="pid" autofocus/></td></tr>
<tr><td>层级:</td><td><input type="text" name="level" value="1"/></td></tr>
<tr><td>名称:</td><td><input type="text" name="name"/></td></tr>
<tr><td>描述:</td><td><input type="text" name="description"/></td></tr>
<tr><td>图标:</td><td><input type="text" name="icon"/></td></tr>
<tr>
<td>类型:</td>
<td>
<select name="type">
<option value="1">普通</option>
<option value="2">热门</option>
</select>
</td>
</tr>
<tr><td>别名:</td><td><input type="text" name="alias"/></td></tr>
<tr><td></td><td><a href="${basePath}/manage/category/list">取消</a> <input type="submit" value="保存"/></td></tr>
</table>
</form>
</div>
</body>
</html>

View File

@ -0,0 +1,122 @@
<%@ 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="level">层深</label>
<input id="level" type="text" class="form-control" name="level" maxlength="5">
</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="alias">别名</label>
<input id="alias" type="text" class="form-control" name="alias" maxlength="20">
</div>
<div class="form-group">
<label for="description">描述</label>
<input id="description" type="text" class="form-control" name="description" maxlength="200">
</div>
<div class="form-group">
<label for="icon">图标</label>
<input id="icon" type="text" class="form-control" name="icon" maxlength="20">
</div>
<div class="radio">
<div class="radio radio-inline radio-info">
<input id="type_1" type="radio" name="type" value="1" checked>
<label for="type_1">普通 </label>
</div>
<div class="radio radio-inline radio-danger">
<input id="type_2" type="radio" name="type" value="2">
<label for="type_2">热门 </label>
</div>
</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/category/create',
data: $('#createForm').serialize(),
beforeSend: function() {
if ($('#name').val() == '') {
$('#name').focus();
return false;
}
if ($('#alias').val() == '') {
$('#alias').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,227 @@
<%@ 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:category:create"><a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i> 新增类目</a></shiro:hasPermission>
<shiro:hasPermission name="cms:category:update"><a class="waves-effect waves-button" href="javascript:;" onclick="updateAction()"><i class="zmdi zmdi-edit"></i> 编辑类目</a></shiro:hasPermission>
<shiro:hasPermission name="cms:category:delete"><a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"><i class="zmdi zmdi-close"></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/category/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: 'categoryId',
maintainSelected: true,
toolbar: '#toolbar',
columns: [
{field: 'ck', checkbox: true},
{field: 'categoryId', title: '编号', sortable: true, align: 'center'},
{field: 'pid', title: '上级编号'},
{field: 'name', title: '类目名称'},
{field: 'alias', title: '类目别名'},
{field: 'description', title: '描述'},
{field: 'icon', title: '图标', sortable: true, align: 'center', formatter: 'iconFormatter'},
{field: 'type', title: '类型', sortable: true, align: 'center', formatter: 'typeFormatter'},
{field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
]
});
});
// 格式化操作按钮
function actionFormatter(value, row, index) {
return [
'<a class="update" href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ',
'<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
].join('');
}
// 格式化图标
function iconFormatter(value, row, index) {
return '<i class="' + value + '"></i>';
}
// 格式化类型
function typeFormatter(value, row, index) {
if (value == 1) {
return '<span class="label label-primary">普通</span>';
}
if (value == 2) {
return '<span class="label label-danger">热门</span>';
}
}
// 新增
var createDialog;
function createAction() {
createDialog = $.dialog({
animationSpeed: 300,
title: '新增类目',
content: 'url:${basePath}/manage/category/create',
onContentReady: function () {
initMaterialInput();
}
});
}
// 编辑
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/category/update/' + rows[0].categoryId,
onContentReady: function () {
initMaterialInput();
}
});
}
}
// 删除
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].categoryId);
}
$.ajax({
type: 'get',
url: '${basePath}/manage/category/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

@ -1,67 +0,0 @@
<%@ 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"%>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>列表</title>
</head>
<body>
<div>
<a href="${basePath}/manage/index">首页</a> &gt; 类目列表
</div>
<div>
<table border="1">
<caption><a href="${basePath}/manage/category/add">新增</a></caption>
<thead>
<tr>
<th>ID</th>
<th>上级编号</th>
<th>层级</th>
<th>名称</th>
<th>描述</th>
<th>图标</th>
<th>类型</th>
<th>别名</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach var="category" items="${categorys}">
<tr>
<td>${category.categoryId}</td>
<td>${category.pid}</td>
<td>${category.level}</td>
<td>${category.name}</td>
<td>${category.description}</td>
<td>${category.icon}</td>
<td>
<c:if test="${category.type==1}">普通</c:if>
<c:if test="${category.type==2}">热门</c:if>
</td>
<td>${category.alias}</td>
<td>
<jsp:useBean id="date" class="java.util.Date"/>
<jsp:setProperty name="date" property="time" value="${category.ctime}"/>
<fmt:formatDate value="${date}" type="both" pattern="yyyy-MM-dd HH:mm:ss" timeZone="Asia/Shanghai"/>
</td>
<td>
<a href="${basePath}/manage/category/update/${category.categoryId}">修改</a>
<a href="${basePath}/manage/category/delete/${category.categoryId}" onclick="return confirm('确认删除吗?');">删除</a>
<a href="${basePath}/manage/category/up/${article.articleId}">上移</a>
<a href="${basePath}/manage/category/down/${article.articleId}">下移</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div>${paginator.html}</div>
</div>
</body>
</html>

View File

@ -1,42 +1,122 @@
<%@ page contentType="text/html; charset=utf-8"%>
<%@ 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>
<head>
<meta charset="utf-8"/>
<title>编辑</title>
</head>
<body>
<div>
<a href="${basePath}/manage/index">首页</a> &gt; <a href="${basePath}/manage/category/list">类目列表</a> &gt; 编辑
</div>
<div>
<form method="post">
<table border="1">
<input type="hidden" name="categoryId" value="${category.categoryId}"/>
<tr><td>上级编号:</td><td><input type="text" name="pid" value="${category.pid}"/></td></tr>
<tr><td>层级:</td><td><input type="text" name="level" value="${category.level}"/></td></tr>
<tr><td>名称:</td><td><input type="text" name="name" value="${category.name}"/></td></tr>
<tr><td>描述:</td><td><input type="text" name="description" value="${category.description}"/></td></tr>
<tr><td>图标:</td><td><input type="text" name="icon" value="${category.icon}"/></td></tr>
<tr>
<td>类型:</td>
<td>
<select name="type">
<option value="1" <c:if test="${category.type==1}">selected="selected"</c:if>>普通</option>
<option value="2" <c:if test="${category.type==2}">selected="selected"</c:if>>热门</option>
</select>
</td>
</tr>
<tr><td>别名:</td><td><input type="text" name="alias" value="${category.alias}"/></td></tr>
<tr><td></td><td><a href="${basePath}/manage/category/list">取消</a> <input type="submit" value="保存"/></td></tr>
</table>
<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="${category.pid}">
</div>
<div class="form-group">
<label for="level">层深</label>
<input id="level" type="text" class="form-control" name="level" maxlength="5" value="${category.level}">
</div>
<div class="form-group">
<label for="name">名称</label>
<input id="name" type="text" class="form-control" name="name" maxlength="20" value="${category.name}">
</div>
<div class="form-group">
<label for="alias">别名</label>
<input id="alias" type="text" class="form-control" name="alias" maxlength="20" value="${category.alias}">
</div>
<div class="form-group">
<label for="description">描述</label>
<input id="description" type="text" class="form-control" name="description" maxlength="200" value="${category.description}">
</div>
<div class="form-group">
<label for="icon">图标</label>
<input id="icon" type="text" class="form-control" name="icon" maxlength="20" value="${category.icon}">
</div>
<div class="radio">
<div class="radio radio-inline radio-info">
<input id="type_1" type="radio" name="type" value="1" <c:if test="${category.type==1}">checked</c:if>>
<label for="type_1">普通 </label>
</div>
<div class="radio radio-inline radio-danger">
<input id="type_2" type="radio" name="type" value="2" <c:if test="${category.type==2}">checked</c:if>>
<label for="type_2">热门 </label>
</div>
</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>
</body>
</html>
<script>
function createSubmit() {
$.ajax({
type: 'post',
url: '${basePath}/manage/category/update/${category.categoryId}',
data: $('#updateForm').serialize(),
beforeSend: function() {
if ($('#name').val() == '') {
$('#name').focus();
return false;
}
if ($('#alias').val() == '') {
$('#alias').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>

View File

@ -18,7 +18,7 @@
<body>
<div id="main">
<div id="toolbar">
<shiro:hasPermission name="cms:tag:read"><a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i> 新增标签</a></shiro:hasPermission>
<shiro:hasPermission name="cms:tag:create"><a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i> 新增标签</a></shiro:hasPermission>
<shiro:hasPermission name="cms:tag:update"><a class="waves-effect waves-button" href="javascript:;" onclick="updateAction()"><i class="zmdi zmdi-edit"></i> 编辑标签</a></shiro:hasPermission>
<shiro:hasPermission name="cms:tag:delete"><a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"><i class="zmdi zmdi-close"></i> 删除标签</a></shiro:hasPermission>
</div>