思路
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