HTML代码块
<div class="container">
<div class="row">
<table class="table">
</table>
</div>
</div>
<!-- <a class="btn btn-primary" data-toggle="modal" href='#modal-id'>Trigger modal</a> -->
<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">添加文章</h4>
</div>
<div class="modal-body">
<form action="#" method="POST" class="form-horizontal" role="form">
<input type="hidden" id="_id" name="_id">
<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" name="title" minlength="6" maxlength="12">
</div>
</div>
<div class="form-group">
<label for="content" class="col-sm-2 control-label">正文</label>
<div class="col-sm-10">
<textarea class="form-control" name="content" id="content" cols="30" rows="5" minlength="10" maxlength="50"></textarea>
</div>
</div>
<div class="form-group">
<label for="top" class="col-sm-2 control-label">置顶</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" name="" id="top" style="width: 30px;height: 30px;">
</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>
删除
var id=$(this).parent().attr("data-id");
if(confirm(`确定要删除${id}吗？`)){
// console.log(id);
$.ajax({
url: "http://localhost:3000/content",
type: "DELETE",
data:{_id:id},
success:function(res){
if (res.status === 200) {
load();
}
}
})
}
})
修改
//第二步 动态
var id=$(this).parent().attr("data-id");
$.ajax({
url: `http://localhost:3000/content/${id}`,
type: "GET",
success:function(res){
if (res.status===200) {
const data=res.data;
//第一步 静态
$(".modal-title").html("修改文章");
$("#_id").val(id);
$("#title").val(data.title);
$("#content").val(data.content);
$("#top").prop("checked",data.top);
//第三步 显示
$("#modal-id").modal("show");
}
}
})
})
$("#modal-id").on("hidden.bs.modal",function(){
$("#_id").val("");
$("#title").val("");
$("#content").val("");
$("#top").prop("checked",false);
})
添加
submitHandler:function(){
var id=$("#_id").val();
var title=$("#title").val();
var content=$("#content").val();
var top=$("#top").prop("checked");
if (id) {
$.ajax({
url: `http://localhost:3000/content/${id}`,
type: "PUT",
data:{title,content,top},
success:function(res){
if (res.status === 200) {
$("#modal-id").modal('hide');
load();
}else{
alert(res.msg)
}
}
})
}else{
$.ajax({
url: "http://localhost:3000/content",
type: "POST",
data:{title,content,top},
success:function(res){
if (res.status === 200) {
$("#modal-id").modal('hide');
load();
}else{
alert(res.msg)
}
}
})
}
},
rules:{
title:{
required: true,
minlength:6,
maxlength:12
},
content:{
required: true,
minlength:10,
maxlength:50
}
},
messages:{
title:{
required:"请输入标题",
minlength:"标题最少6个字符",
maxlength:"标题最多12个字符"
},
content:{
required: "请输入内容",
minlength:"内容最少10个字符",
maxlength:"内容最多50个字符"
}
}
})
$("#modal-id").on("click",".btn-primary",function(){
$(this).closest(".modal-content").find("form").submit();
})
增删改查中的一些基本代码，里面加载了一些JavaScript的基本用法
$.ajax({
url: "http://localhost:3000/content",
type: "GET",
success: function (res) {
if (res.status === 200) {
$('.table').bootstrapTable('destroy').bootstrapTable({
data: res.data,//属性名称
//url:"" "请求数据源"
pagination: true,//启用分页
pageSize: 3,//分页大小
//PageList:[5,10,20]
showToggle: "true",//切换列表
showPaginationSwitch: "true",//分页开关
showFullscreen: "true",//全屏
// showRefresh:"true",//刷新,仅支持url数据源
search: "true",//查询工具条
showSearchButton: true,//显示查询按钮
clickToSelect:"true",//单击这一行选中
showPrint: "true",//打印按钮
showExport: "true",//导出按钮
//列
columns: [{
field:"state",
checkbox:"true"
},
{
field: '_id',//数据绑定的属性
title: '编号'//
}, {
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-title").html("添加文章");
$("#modal-id").modal("show");
},
attributes: {
title: "add",
//属性绑定
// "data-toogle":"modal",
// href:'#modal-id'
}
},
btnDel: {
icon: 'glyphicon glyphicon-remove',
event: function () {
//获取所有选中的行对应的绑定数据
var ids=$(".table").bootstrapTable("getSelections")
// console.log(ids);
// alert('删除')
$.ajax({
url: "http://localhost:3000/content",
type: "DELETE",
data:{_id:ids},
// data:{_id:ids}},
success:function(res){
if (res.status === 200) {
load();
}
}
})
},
attributes: {
title: "remove"
}
}
}
}
})
}
}
})
}
