bootstrap表格結合SSM框架的刪除功能
阿新 • • 發佈：2018-12-19
bootstrap表格結合SSM框架的刪除功能(結合複選框，可一次刪除多條資料)
1.搭建SSM,匯入相關包，以及跨域訪問包和配置
2.靜態頁面`
` 3.靜態頁面寫好後,就要對刪除按鈕進行操作了 建立一個數組，用來存放需要刪除的資料的id ``` var arr = new Array(); ``` 4.對選中和不選中，全選和不全選做的一些操作<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.測試成功(能一次刪除多條資料)
