單條刪除和批量刪除

5.1 目標(biāo)

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

5.2 思路

點(diǎn)擊總刪除和單個(gè)刪除按鈕，彈出模態(tài)框，顯示你要?jiǎng)h除的角色姓名，將其封裝為一個(gè)數(shù)組，然后用戶確認(rèn)，發(fā)送ajax請(qǐng)求，后臺(tái)進(jìn)行刪除

代碼（后端）

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); }

代碼（代碼）

聲明打開模態(tài)框的函數(shù)，傳入數(shù)組參數(shù)，清空原來(lái)顯示過(guò)得數(shù)組（防止后面用戶多次刪除進(jìn)行了累加），聲明全局變量的空數(shù)組（為后面可以跨函數(shù)取值），然后進(jìn)行將傳入的數(shù)組進(jìn)行遍歷，將要的名字傳入到模態(tài)框的DIV中，然后調(diào)用數(shù)組對(duì)象的push方法進(jìn)要?jiǎng)h除的id傳入。

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

2.給模態(tài)框中的確定按鈕綁定刪除函數(shù)，將上面?zhèn)魅氲娜纸巧玦d的數(shù)組包裝成json對(duì)象，返回一個(gè)值，如何進(jìn)行ajax提交，返回結(jié)果，拿到信息，成功則提示成功，否則提示失敗+錯(cuò)誤信息

// 給移除數(shù)據(jù)綁定點(diǎn)擊函數(shù)$("#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.給單個(gè)刪除綁定響應(yīng)函數(shù)
使用juery對(duì)象的on函數(shù)來(lái)解決
// 首先找到所有的“動(dòng)態(tài)生成的”元素附著的靜態(tài)元素，然后獲取到name，打開模態(tài)框，將獲取的id和名字，傳入到數(shù)組中去，然后調(diào)用1.聲明的函數(shù)。

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

4.通過(guò)js將多選框與總選框進(jìn)行狀態(tài)綁定，然后利用反向操作，將選框的數(shù)量進(jìn)行比較，相等總數(shù)，就全選住了，反之，

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

5.給批量刪除進(jìn)行點(diǎn)擊函數(shù)的綁定，要遍歷當(dāng)前選中的多選框，然后傳入數(shù)組中，調(diào)用前面聲明的函數(shù)再。

// 給批量刪除綁定點(diǎn)擊響應(yīng)函數(shù)$("#batchRemoveBtn").click(function(){var roleArray = [];// 遍歷當(dāng)前選中的多選框$(".itemBox:checked").each(function(){// 使用this引用當(dāng)前遍歷得到的多選框var roleId = this.id;//通過(guò)dom獲取角色名稱var roleName = $(this).parent().next().text();roleArray.push({"roleId":roleId,"roleName":roleName });});// 檢查roleArray的長(zhǎng)度是否為0if(roleArray.length == 0){layer.msg("請(qǐng)至少選擇一個(gè)進(jìn)行刪除！"); }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>";

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。