bootstrap表格结合SSM框架的删除功能(结合复选框，可一次删除多条数据)
1.搭建SSM,导入相关包，以及跨域访问包和配置
2.静态页面`
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-table.css" />
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-zh-CN.js"></script>
<script src="selfjs/index.js"></script>
<title>用bootstrap做的Game项目</title>
</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
<!-- 查询面板 -->
<div class="panel panel-default">
<div class="panel-heading">查询条件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="s_dpname">游戏名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="game_name">
</div>
<label class="control-label col-sm-1" for="s_level">游戏公司</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="game_conpany">
</div>
<div class="col-sm-4" style="text-align:left;">
<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
</div>
</div>
</form>
</div>
</div>
<!-- 表格上方的工具栏 -->
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<!-- 数据展示 -->
<table id="tb_departments"></table>
</div>
<!-- 弹出窗体 -->
<div class="modal fade" id="win" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</body>
onCheck:function(row){
//当选中这条时，把它的gameId放入数组
arr.push(row.gameId);
},
onUncheck:function(row){
//当不选中这条时，把它的gameId从数组中删除
var gameId = row.gameId;
//删除
arr[arr.indexOf(gameId)] = null;
arr.splice(arr.indexOf( null ),1);
},
onCheckAll:function(rows){
//全选时,把它们的gameId放到数组中去
for(i=0;i<rows.length;i++){
arr.push(rows[i].gameId);
}
},
onUncheckAll:function(rows){
//取消全选时,把之前全选的从数组中删除
for(i=0;i<rows.length;i++){
var gameId = rows[i].gameId;
arr[arr.indexOf(gameId)] = null;
arr.splice(arr.indexOf( null ),1);
}
},
5.把这个数组传到后台
//执行删除(一次删除多条)
$('#btn_delete').click(function(){
//把arr数组传到后台去
$.ajax({
type:"get",
url:"http://localhost:8080/bootstrapDemo/game/doDelete?arr="+arr,
success:function(data){
alert('成功删除了'+data.ct+'条数据');
//清空数组(连续执行删除时)
arr.length = 0;
//直接刷新表格：删除一页所有的数据时有bug
//$("#tb_departments").bootstrapTable('refresh');
//重新加载本页
window.location = 'http://127.0.0.1:8020/DgameBybootstrap/index.html';
}
});
});
6.在后台的controller中操作
//执行删除,可一次删除多条
@RequestMapping("doDelete")
public @ResponseBody Map<String,Object> doDelete(int[] arr){
Map map = new HashMap();
System.out.println("执行删除");
//遍历传过来的gameId数组
for(int i:arr){
//循环执行删除语句
gameService.deleteByPrimaryKey(i);
}
map.put("ct", arr.length);
return map;
}
7.测试成功(能一次删除多条数据)
