Document
</table>
</div>
</div>
<!-- 添加 -->
<div class="modal fade" id="modal-id">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" style="text-align: center;">添加文章</h4>
</div>
<div class="modal-body">
<form action="#" method="POST" class="form-horizontal" role="form">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">标题</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title">
</div>
</div>
<div class="for-group">
<label for="content" class="col-sm-2 control-label">正文</label>
<div class="col-sm-10">
<textarea cols="30" rows="5" class="form-control" id="contrent"></textarea>
</div>
</div>
<div class="for-group">
<label for="top" class="col-sm-2 control-label">置顶</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="top" style="width: 34px;height: 34px;">
</div>
<!-- <div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div> -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
<!-- <a href="#"><span class="glyphicon glyphicon-edit text-primary"></span></a>
<a href="#"><span class="glyphicon glyphicon-remove text-danger"></span></a> -->
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/tableExport.min.js"></script>
<script src="./js/jspdf.min.js"></script>
<script src="./js/jspdf.plugin.autotable.js"></script>
<script src="./js/bootstrap-table.min.js"></script>
<script src="./js/bootstrap-table-print.min.js"></script>
<script src="./js/bootstrap-table-export.min.js"></script>
<!-- //显示内容 -->
<script>
$(function () {
load();
$(".table").on("click", ".glyphicon-remove", function () {
var id = $(this).parent().attr("data-id");
if (confirm(`确定要删除${id}?`)) {
$.ajax({
url: "http://localhost:3001/content",
type: "DELETE",
data: { _id: id },
success: function (res) {
if (res.status === 200) {
load();
}
}
})
}
})
//给确定加事件 ("#modal-id").on("click",".btn-primary",function(){ var title=(this).closest(".modal-content").find("#title").val(); var content=("#content").val(); var top =("#top").val()==="on";
$.ajax({
url: "http://localhost:3001/content",
type: "POST",
data: { title, content,top},
success: function (res) {
console.log(res)
if (res.status === 200) {
$("modal-id").modal("hide");
load();
}
}
})
})
function load() {
$.ajax({
url: "http://localhost:3001/content",
type: "GET",
success: function (res) {
if (res.status === 200) {
$('.table').bootstrapTable('destroy').bootstrapTable({//.table是跟<table class="table"></table>有联系
data: res.data,
//url:"",数据源
pagination: true, //启用分页
pageSize: 1, //分页大小
// pageList:[5,10,20],
showToggle: true,//列表视图/表格试图
showPaginationSwitch: true,//分页开关
showFullscreen: true,//全屏显示
//showRefresh:true,//刷新 ，仅支持url数据源
search: true,//启用查询
showSearchButton: true,//显示查询按钮
showPrint: true,//显示打印按钮
showExport: true,//显示导出按钮
//clicktoSelect: true,//单击选中
columns: [{}
, { //columns 列
field: "state",
checkbox: "true"
}, {
field: 'title',
title: '标题'
}, {
field: 'content',
title: '内容'
}, {
field: 'top',
title: '是否置顶',
formatter: function (value, data) {
//value 当前列的值
//data 当前行的数据
return value ? "是" : "否";
}
}, {
title: '操作',
formatter: function (value, data) {
return `<a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-edit text-primary"></span></a>
<a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-remove text-danger"></span></a>`;
}
}
],
// 添加 删除
buttons: function () {
return {
//添加自定义按钮
btnAdd: {
icon: 'glyphicon glyphicon-plus',
event: function () {
// alert('添加')
// ...
$("#modal-id").modal("show")
},
attributes: {
title: "add",
// "data-toggle":"modal",
// "href" :"#modal-id",
}
},
//删除
btnDel: {
icon: 'glyphicon glyphicon-remove',
event: function () {
//获取所有选中的行对应的绑定对象
var ids = $(".table").bootstrapTable("getSelections");
$.ajax({
url: "http://localhost:3001/content",
type: "DELETE",
//data: { _id: ids },
data: { _id: ids },
success: function (res) {
if (res.status === 200) {
load();
}
}
})
},
attributes: {
title: "remove"
}
}
}
}
})
}
}
})
}
})
</script>
