单条删除和批量删除

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>";