频道管理页面布局
列表页布局
<!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 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="/channel/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">
<!--begin: Datatable -->
<table class="m-datatable" id="html_table" width="100%">
<thead>
<tr>
<th title="Field #1">
频道名称
</th>
<th title="Field #2">
排序
</th>
<th title="Field #3">
操作
</th>
</tr>
</thead>
<tbody>
<tr th:each="channel : ${channels}">
<td th:text="${channel.name}">天涯明月刀</td>
<td th:text="${channel.sort}">100</td>
<td>
<div class="m-demo__preview m-demo__preview--btn">
<a href="#" class="btn btn-primary btn-sm m-btn m-btn m-btn--icon">
<span>
<i class="la la-edit"></i>
<span>
编辑
</span>
</span>
</a>
<a href="#" class="btn btn-danger btn-sm m-btn m-btn m-btn--icon">
<span>
<i class="la la-trash"></i>
<span>
删除
</span>
</span>
</a>
<a href="#" class="btn btn-brand btn-sm m-btn m-btn m-btn--icon">
<span>
<i class="la la-plus"></i>
<span>
添加下级菜单
</span>
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
<!--end: Datatable -->
</div>
</div>
<th:block th:include="includes/footer :: footer"></th:block>
<script src="/assets/app/js/datatable.js" type="text/javascript"></script>
</body>
</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>
<form class="m-form" action="/channel/save" method="post">
<div class="m-portlet__body">
<div class="m-form__section m-form__section--first">
<div class="form-group m-form__group row">
<label class="col-lg-3 col-form-label"> 父级频道: </label>
<div class="col-lg-6">
<input id="pid" name="pid" type="hidden" />
<input id="pidText" 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="name" 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="sort" type="number" class="form-control m-input" placeholder="排序" />
</div>
</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-primary"> 提交 </button>
<button type="reset" class="btn btn-secondary" onclick="history.go(-1);"> 返回 </button>
</div>
</div>
</div>
</div>
</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">
<ul>
<li th:each="channel : ${channels}" th:attr="id=${channel.id}">
<a href="javascript:void(0);" th:text="${channel.name}">根目录</a>
</li>
</ul>
</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>
</body>
</html>
treeview.js
var TreeView = function () {
var handlerInitTree = function () {
$('#m_tree_1').jstree();
// 绑定节点点击事件
$('#m_tree_1').bind("activate_node.jstree", function (obj, e) {
var currentNode = e.node;
$("#pid").val(currentNode.id);
$("#pidText").val(currentNode.text);
});
};
return {
init: function () {
handlerInitTree();
}
}
}();
jQuery(document).ready(function () {
TreeView.init();
});