單條刪除和批量刪除

5.1 目標

前端的“單條刪除”和“批量刪除”在后端合并為同一套操作。合并的依據是：單 條刪除時 id 也放在數組中，后端完全根據 id 的數組進行刪除

5.2 思路

點擊總刪除和單個刪除按鈕，彈出模態框，顯示你要刪除的角色姓名，將其封裝為一個數組，然后用戶確認，發送ajax請求，后臺進行刪除

代碼（后端）

RoleHandler @ResponseBody @RequestMapping("/role/remove/by/role/id/array.json") public ResultEntity<String> removeByRoleIdAarry(@RequestBody List<Integer> roleIdList) { roleService.removeRole(roleIdList); return ResultEntity.successWithoutData(); } service方法 @Override public void removeRole(List<Integer> roleIdList) { RoleExample example = new RoleExample(); Criteria criteria = example.createCriteria(); //delete from t_role where id in (5,8,12) criteria.andIdIn(roleIdList); roleMapper.deleteByExample(example); }

代碼（代碼）

聲明打開模態框的函數，傳入數組參數，清空原來顯示過得數組（防止后面用戶多次刪除進行了累加），聲明全局變量的空數組（為后面可以跨函數取值），然后進行將傳入的數組進行遍歷，將要的名字傳入到模態框的DIV中，然后調用數組對象的push方法進要刪除的id傳入。

function showConfirmModel(roleArray){$("#roleNameDiv").empty();$("#confirmModal").modal("show");window.roleIdArray = [];// 遍歷數組for(var i=0;i<roleArray.length;i++){var role = roleArray[i];var roleName = role.roleName;$("#roleNameDiv").append(roleName+"<br/>");var roleId = role.roleId;// 調用數組對象的push方法window.roleIdArray.push(roleId);}}

2.給模態框中的確定按鈕綁定刪除函數，將上面傳入的全局角色id的數組包裝成json對象，返回一個值，如何進行ajax提交，返回結果，拿到信息，成功則提示成功，否則提示失敗+錯誤信息

// 給移除數據綁定點擊函數$("#removeRoleBtn").click(function(){ $("#roleNameDiv").empty();// 將全局變量的roleArray包裝為json字符串 返回給requestBodyvar requestBody = JSON.stringify(window.roleIdArray); $.ajax({"url":"role/remove/by/role/id/array.json","type":"post","data":requestBody,"contentType":"application/json;charset=UTF-8","datatype":"json","success":function(response){var result = response.result;if(result == "SUCCESS"){layer.msg("操作成功!"); generatePage();}else{layer.msg("操作失敗！"+response.message);} },"error":function(response){layer.msg(response.status+""+response.statusText);}}); $("#confirmModal").modal("hide"); });

3.給單個刪除綁定響應函數
使用juery對象的on函數來解決
// 首先找到所有的“動態生成的”元素附著的靜態元素，然后獲取到name，打開模態框，將獲取的id和名字，傳入到數組中去，然后調用1.聲明的函數。

// 給單個刪除綁定單擊事件$("#rolePageBody").on("click",".deleteBtn",function(){$("#roleNameDiv").empty();var roleName = $(this).parent().prev().text();//打開修改模態框$("#confirmModal").modal("show");var roleArray = [{roleId:this.id,roleName:roleName}];showConfirmModel(roleArray);});

4.通過js將多選框與總選框進行狀態綁定，然后利用反向操作，將選框的數量進行比較，相等總數，就全選住了，反之，

$("#summerBox").click(function(){// 獲取當前多選框自身的狀態 var currentStatus = this.checked;// 用當前多選框的狀態設置其他多選框$(".itemBox").prop("checked",currentStatus);});// 全選全不選的反向操作 $("#rolePageBody").on("click",".itemBox",function(){// 獲取當前選中的，itemBox的數量var checkedBoxCount = $(".itemBox:checked").length;// 獲取全部，itemBox的數量var totalBoxCount = $(".itemBox").length;// 使用二者的比較結果來設置總的checkbox$("#summerBox").prop("checked",checkedBoxCount == totalBoxCount);});

5.給批量刪除進行點擊函數的綁定，要遍歷當前選中的多選框，然后傳入數組中，調用前面聲明的函數再。

// 給批量刪除綁定點擊響應函數$("#batchRemoveBtn").click(function(){var roleArray = [];// 遍歷當前選中的多選框$(".itemBox:checked").each(function(){// 使用this引用當前遍歷得到的多選框var roleId = this.id;//通過dom獲取角色名稱var roleName = $(this).parent().next().text();roleArray.push({"roleId":roleId,"roleName":roleName });});// 檢查roleArray的長度是否為0if(roleArray.length == 0){layer.msg("請至少選擇一個進行刪除！"); }else{showConfirmModel(roleArray);}});

html中綁定的class與id

<button type="button" id="batchRemoveBtn" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 刪除</button> var deleteBtn = "<button id='"+roleId+"' type='button' class='btn btn-danger btn-xs deleteBtn'><i class=' glyphicon glyphicon-remove'></i></button>";

總結

以上是生活随笔為你收集整理的单条删除和批量删除的思路和实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。