Bootstrap Table批量(全选)删除,类似以下这样:
思路
1:jsp页面,删除按钮
<div class="mytab">
<table id="mytab" class="table table-hover"></table>
</div>
2:在columns里面,checkbox : true
3:最主要的是js里面实现,删除按钮事件
获得要删除整条数据的id,并且传递给后端,在数据库进行操作
部分js代码
var path = getContextPath();
$(function() {
$('#mytab').bootstrapTable({
method : 'get',
url : path + "/alarm/health",// 请求路径
striped : true, // 是否显示行间隔色
pageNumber : 1, // 初始化加载第一页
pagination : true,// 是否分页
sidePagination : 'server',// server:服务器端分页|client:前端分页
pageSize : 8,// 单页记录数
pageList : [ 5, 10, 20, 30 ],// 可选择单页记录数
queryParams : function(params) {// 上传服务器的参数
var temp = {// 如果是在服务器端实现分页,limit、offset这两个参数是必须的
limit : params.limit, // 每页显示数量
offset : params.offset, // SQL语句起始索引
sn : $("#sn").val(),
name : $("#sname").val(),
};
return temp;
},
columns : [ {
checkbox : true
}, {
title : '设备编号',
field : 'sn',
}, {
title : '告警日期',
field : 'timestamp',
formatter : formatTime
}, {
title : '姓名',
field : 'name',
}, {
title : '心率',
field : 'heart',
}, {
title : '呼吸率',
field : 'breath',
}, {
title : '描述',
field : 'type',
formatter : formatBtn
} ]
})
// 删除按钮事件
$("#remove").on("click", function() {
if (!confirm("是否确认删除?"))
return;
var rows = $("#mytab").bootstrapTable('getSelections');// 获得要删除的数据
if (rows.length == 0) {// rows 主要是为了判断是否选中,下面的else内容才是主要
alert("请先选择要删除的记录!");
return;
} else {
var ids = new Array();// 声明一个数组
$(rows).each(function() {// 通过获得别选中的来进行遍历
ids.push(this.id);// cid为获得到的整条数据中的一列
});
deleteMs(ids)
}
})
function deleteMs(ids) {
$.ajax({
url : path + "/alarm",
data : "ids=" + ids,
type : "post",
dataType : "json",
success : function(data) {
$('#mytab').bootstrapTable('refresh', {
url : path + '/alarm/health'
});
}
});
}
})
参考文章:https://blog.csdn.net/Fly_tom/article/details/81035899
https://www.jianshu.com/p/761299fd877f
类似文章:jQuery+Datatables实现表格批量删除功能
https://www.jianshu.com/p/d8de8f062c1d
原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq技术交流群聊:649040560。
网友评论