文章管理页面布局
表单页
HTML
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- begin::Head -->
<head>
<title>
后台管理 | 文章管理
</title>
<th:block th:include="includes/header :: header"></th:block>
</head>
<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default" >
<div class="m-portlet">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<span class="m-portlet__head-icon m--hide"> <i class="la la-gear"></i> </span>
<h3 class="m-portlet__head-text"> 文章管理 </h3>
</div>
</div>
</div>
<!--begin::Form-->
<form class="m-form" action="/article/save" method="post">
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<label class="col-lg-3 col-form-label"> 所属频道 </label>
<div class="col-lg-6">
<input id="channelId" name="channelId" type="hidden" />
<input id="channelText" type="text" class="form-control m-input" placeholder="请选择" readonly data-toggle="modal" data-target="#m_modal_1" />
</div>
</div>
<div class="form-group m-form__group row">
<label class="col-lg-3 col-form-label"> 文章标题 </label>
<div class="col-lg-6">
<input name="title" type="text" class="form-control m-input" placeholder="文章标题" />
</div>
</div>
<div class="form-group m-form__group row">
<label class="col-lg-3 col-form-label"> 文章链接 </label>
<div class="col-lg-6">
<input name="url" type="text" class="form-control m-input" placeholder="文章链接" />
</div>
</div>
<div class="form-group m-form__group row">
<label class="col-lg-3 col-form-label"> 文件简介 </label>
<div class="col-lg-6">
<input name="introduction" type="text" class="form-control m-input" placeholder="文件简介" />
</div>
</div>
<div class="form-group m-form__group row">
<label class="col-lg-3 col-form-label"> 相册 </label>
<div class="col-lg-6">
<input name="cover" type="text" class="form-control m-input" placeholder="相册" />
</div>
</div>
</div>
<div class="m-portlet__foot m-portlet__foot--fit">
<div class="m-form__actions m-form__actions">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<button type="submit" class="btn btn-success"> 提交 </button>
<button type="reset" class="btn btn-secondary" onclick="history.go(-1);"> 返回 </button>
</div>
</div>
</div>
</div>
</form>
<!--end::Form-->
</div>
<div class="modal fade" id="m_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"> 所属频道 </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"> × </span> </button>
</div>
<div class="modal-body">
<div id="m_tree_1" class="tree-demo"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"> 关闭 </button>
<button type="button" class="btn btn-primary" data-dismiss="modal"> 选择 </button>
</div>
</div>
</div>
</div>
<th:block th:include="includes/footer :: footer"></th:block>
<script src="/assets/app/js/treeview.js" type="text/javascript"></script>
<script>
$(function () {
TreeView.initTree("m_tree_1", "/channel/tree", function (obj, e) {
var currentNode = e.node;
$("#channelId").val(currentNode.id);
$("#channelText").val(currentNode.text);
});
});
</script>
</body>
</html>
改造后的 treeview.js
var TreeView = function () {
/**
* 初始化树控件
* @param id 树控件的元素 ID
* @param url Ajax 请求地址
* @param callback 回调函数，用于绑定树节点的点击事件
*/
var handlerInitTree = function (id, url, callback) {
$("#" + id).jstree({
"core": {
"themes": {
"responsive": false
},
// so that create works
"check_callback": true,
'data': {
'url': function (node) {
return url;
},
'data': function (node) {
return {'pid': node.id};
}
}
},
"types": {
"default": {
"icon": "fa fa-folder m--font-brand"
},
"file": {
"icon": "fa fa-file m--font-brand"
}
},
"state": {"key": "demo3"},
"plugins": ["dnd", "state", "types"]
});
$('#' + id).bind("activate_node.jstree", function (obj, e) {
callback(obj, e);
});
};
return {
initTree: function (id, url, callback) {
handlerInitTree(id, url, callback);
}
}
}();
列表页
HTML
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- begin::Head -->
<head>
<title>
后台管理 | 文章管理
</title>
<th:block th:include="includes/header :: header"></th:block>
<link href="/assets/plugins/treeTable/themes/vsStyle/treeTable.css" rel="stylesheet" type="text/css"/>
</head>
<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
<div class="m-portlet m-portlet--mobile">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
文章管理
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<a href="/article/form" class="btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
<span>
<i class="la la-plus"></i>
<span>
新增
</span>
</span>
</a>
</div>
</div>
<div class="m-portlet__body">
<div class="m_datatable" id="ajax_data"></div>
</div>
</div>
<th:block th:include="includes/footer :: footer"></th:block>
<script src="/assets/app/js/datatable.js" type="text/javascript"></script>
<script>
$(function () {
var columns = [{
field: 'title',
title: '文章标题',
sortable: false,
selector: false,
textAlign: 'center'
}, {
field: 'url',
title: '链接地址',
sortable: false,
selector: false,
textAlign: 'center'
}];
DataTable.initAjaxTable("ajax_data", "/article/data", columns);
});
</script>
</body>
</html>
改造后的 datatable.js
var DataTable = function () {
/**
* 初始化 HTML 表格
* @param id 元素 ID
*/
var handlerInitHtmlTable = function (id) {
var datatable = $('#' + id).mDatatable({
data: {
saveState: {cookie: false}
},
pagination: false,
sortable: false
});
};
/**
* 初始化 Ajax 表格
* @param id 元素 ID
* @param url 数据请求地址
* @param columns 自定义数据列
*/
var handlerInitAjaxTable = function (id, url, columns) {
var datatable = $('#' + id).mDatatable({
// 国际化
translate: {
records: {
processing: '加载中，请稍候...',
noRecords: '还没有任何记录'
},
toolbar: {
pagination: {
items: {
default: {
first: '首页',
prev: '上一页',
next: '下一页',
last: '尾页',
more: '更多',
input: '页数',
select: '显示笔数'
},
info: '显示第 {{start}} - {{end}} 条记录，共 {{total}} 条记录'
}
}
}
},
// 定义数据源
data: {
type: 'remote',
source: {
read: {
method: 'POST',
url: url,
map: function (raw) {
var dataSet = raw;
if (typeof raw.data !== 'undefined') {
dataSet = raw.data;
}
return dataSet;
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
// 开启分页功能
pagination: true,
toolbar: {
// toolbar items
items: {
// pagination
pagination: {
// page size select
pageSizeSelect: [10, 20, 50]
}
}
},
// 定义数据列
columns: columns
});
};
return {
initHtmlTable: function (id) {
handlerInitHtmlTable(id);
},
initAjaxTable: function (id, url, columns) {
handlerInitAjaxTable(id, url, columns);
}
}
}();