bootstrap表格遍历_Bootstrap Table批量（全选）删除

Bootstrap Table批量(全选)删除，类似以下这样：

思路

1:jsp页面，删除按钮

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

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。

坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。