You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
188 lines
7.4 KiB
188 lines
7.4 KiB
<!DOCTYPE html> |
|
<html xmlns:th="http://www.thymeleaf.org" lang="en"> |
|
|
|
<head th:replace="admin/common::header(~{::title},~{},~{})"> |
|
<title>文章管理</title> |
|
</head> |
|
|
|
<body> |
|
<th:block th:include="admin/common::nav('article')"></th:block> |
|
|
|
<div class="container lw-main lw-banner"> |
|
<div class="btn-group" role="group" style="margin-bottom: 20px;" aria-label="..."> |
|
<a th:href="@{/admin/write.html}" class="btn btn-success" style="outline: none;"><i class="fa fa-plus"></i> 新增</a> |
|
</div> |
|
<form id="search-form" class="form-inline" style="float:right;"> |
|
|
|
<div class="form-group"> |
|
<label>分类</label> |
|
<select id="article-category" class="form-control" style="width: 100px;"> |
|
<option value="">全部</option> |
|
<option th:each="category:${categories}" th:value="${category.id}" th:text="${category.name}"></option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label>状态</label> |
|
<select id="article-status" class="form-control" style="width: 100px;"> |
|
<option value="">全部</option> |
|
<option value="1">发布</option> |
|
<option value="2">草稿</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label>类型</label> |
|
<select id="article-types" class="form-control" style="width: 100px;"> |
|
<option value="">全部</option> |
|
<option value="1">文章</option> |
|
<option value="2">页面</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label>关键字</label> |
|
<input id="article-keywords" type="text" class="form-control" placeholder="请输入关键字..."> |
|
</div> |
|
<button style="outline: none;" type="reset" class="btn btn-default" id="reset-btn"><i class="fa fa-refresh"></i> 重置</button> |
|
<button style="outline: none;" type="submit" class="btn btn-primary"><i class="fa fa-search"></i> 搜索</button> |
|
</form> |
|
<table id="data-table" style="user-select: none"></table> |
|
</div> |
|
|
|
<th:block th:include="admin/common::footer"></th:block> |
|
<script> |
|
$(function () { |
|
// 显示表单所有文章数据 |
|
// 引入分页和搜索功能 |
|
$('#data-table').bootstrapTable({ |
|
url: "/admin/article/search", |
|
pagination: true, // 开启分页 |
|
sidePagination: 'server', // 使用服务端数据 |
|
pageNumber: 1, // 默认页码第一页 |
|
pageSize: 5, // 每页5条数据 |
|
pageList: [5, 10, 15], // 可选页大小 |
|
responseHandler: function (res) { |
|
console.log(res.data); |
|
return res.data |
|
}, |
|
//这个是查询参数，就是bootstrap-table请求后端时携带的参数 |
|
// offset为数据的序号，limit为页大小 |
|
queryParams: function (params) { |
|
return { |
|
pageNum: (params.offset / params.limit) + 1, |
|
pageSize: params.limit, |
|
title: $('#article-keywords').val(), |
|
type: $('#article-types').val(), |
|
status: $('#article-status').val(), |
|
cid: $('#article-category').val(), |
|
} |
|
}, |
|
columns: [ |
|
{ |
|
title: '序号', |
|
width: 50, |
|
align: 'center', |
|
formatter: function (value, row, index) { |
|
return index + 1 |
|
} |
|
}, |
|
{ |
|
title: '标题', |
|
field: 'title', |
|
align: 'center', |
|
formatter: function (value, row) { |
|
return `<a href="/admin/write.html?id=${row.id}" title="编辑文章">${value}</a> |
|
<a target="_blank" title="打开文章" href="/${row.id}.html"><i class="fa fa-send" style="color: red"></i></a>` |
|
} |
|
}, |
|
{ |
|
title: '状态', |
|
field: 'status', |
|
align: 'center', |
|
formatter: value => { |
|
if (value === 1) { |
|
return `<span>已发布</span>` |
|
} else { |
|
return `<span>草稿</span>` |
|
} |
|
} |
|
|
|
}, |
|
{ |
|
title: '分类', |
|
field: 'category', |
|
align: 'center', |
|
formatter: value => { |
|
return `<a href="javascript:void(0)" data-id="${value.id}" id="selected-category">${value.name}</a>`; |
|
} |
|
}, |
|
{ |
|
title: '文章类型', |
|
field: 'type', |
|
align: 'center', |
|
formatter: value => { |
|
return value===1 ? "文章": "页面"; |
|
} |
|
}, |
|
{ |
|
title: '浏览量', |
|
field: 'views', |
|
align: 'center', |
|
}, |
|
{ |
|
title: '创建时间', |
|
field: 'created', |
|
align: 'center', |
|
}, |
|
{ |
|
field: 'id', |
|
title: '操作', |
|
align: 'center', |
|
width: 100, |
|
formatter: function (value) { |
|
return `<button type="button" data-id="${value}" class="btn btn-danger btn-sm article-delete-btn"><i class="fa fa-trash"></i> 删除</button>` |
|
} |
|
}, |
|
] |
|
}) |
|
|
|
// 点击搜索按钮，阻止表单自动提交 |
|
$('#search-form').on('submit', function () { |
|
$('#data-table').bootstrapTable('refresh', {silent: true, pageNumber: 1, pageSize: 5}); |
|
return false; |
|
}) |
|
|
|
|
|
// 删除文章 |
|
$("#data-table").on("click", ".article-delete-btn", function () { |
|
let id = $(this).data('id') |
|
let idx = layer.confirm('是否要删除该数据？', { |
|
btn: ['确认', '取消'] //按钮 |
|
}, function () { // 点击确认后删除 |
|
$.ajax({ |
|
url: '/admin/article/' + id, |
|
method: 'delete', |
|
dataType: 'json', |
|
success: res => { |
|
if (res.code === 200) { |
|
layer.msg("删除成功", {icon: 1, time: 700}) |
|
$('#data-table').bootstrapTable('refresh', {silent: true}) |
|
} else { |
|
layer.msg(res.message, {icon: 2}) |
|
} |
|
} |
|
}) |
|
layer.close(idx); // 关闭提示框 |
|
}) |
|
}).on('click', '#selected-category', function () { |
|
// 点击文章对分类展示该分类所有文章 |
|
let cid = $(this).data('id'); // 分类id |
|
// 设置搜索条件为查询分类 |
|
$('#reset-btn').click(); |
|
$('#article-category').val(cid); |
|
// 重载查询数据 |
|
$('#data-table').bootstrapTable('refresh', {silent: true,pageNumber: 1, pageSize: 5}); |
|
}) |
|
}) |
|
</script> |
|
</body> |
|
|
|
</html> |