单条删除和批量删除的思路和实现

单条删除和批量删除

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字符串 返回给requestBody
		  var 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的长度是否为0
	  if(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>";