Single deletion and batch deletion

5.1 objectives

Single delete and batch delete in the front end are combined into the same set of operations in the back end. The basis for merging is: when a single item is deleted, the id is also placed in the array, and the back end deletes it completely according to the id array

5.2 ideas

Click the general delete and single delete buttons to pop up the modal box to display the name of the role you want to delete, encapsulate it into an array, and then the user confirms, sends an ajax request and deletes it in the background

Code (back end)

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

Code (code)

Declare the function to open the modal box, pass in the array parameter, Empty the array that was shown before (to prevent repeated users from deleting multiple times), declare the empty array of global variables (for the latter to function across functions), then traverse the incoming array, import the name to the DIV of the modal box, and then call the push method of the array object to enter the id to be deleted.

function showConfirmModel(roleArray){
	  
	  $("#roleNameDiv").empty();
	  
	  $("#confirmModal").modal("show");
	  
	  window.roleIdArray = [];
	  
	  // Traversal array
	  for(var i=0;i<roleArray.length;i++){
		  var role = roleArray[i];
		  var roleName = role.roleName;
		  $("#roleNameDiv").append(roleName+"<br/>");
		  
		  var roleId = role.roleId;
		  
		  // Call the push method of the array object
		  window.roleIdArray.push(roleId);
		  
		  
	  }
	  
  }

2. Bind the delete function to the OK button in the modal box, wrap the array of global role IDS passed in above into json objects, return a value, how to submit ajax, return results, get information, and prompt success if successful, otherwise prompt failure + error

	  // Click the function to remove the data binding
	  $("#removeRoleBtn").click(function(){	 
		  $("#roleNameDiv").empty();
		  // Wrap the role array of the global variable as a json string and return it to 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("Operation succeeded!");						 
						 generatePage();

					}else{
						layer.msg("Operation failed!"+response.message);
					}					
				},
				"error":function(response){
					layer.msg(response.status+""+response.statusText);
				}
		  });		  
		  $("#confirmModal").modal("hide");		  
	  });

3. Delete a binding response function for a single
Use the on function of the juery object to solve the problem
/ / first, find all the static elements of the "dynamically generated" element, then get to name, open the modal box, and get the id and name to the array, then call 1.. Declared function.

 // Click event for a single delete binding
  $("#rolePageBody").on("click",".deleteBtn",function(){
	  $("#roleNameDiv").empty();
	  
	  var roleName = $(this).parent().prev().text();
		 //Open the modify mode box
 		  $("#confirmModal").modal("show");
		 
		 var roleArray = [{
			 roleId:this.id,
			 roleName:roleName
		 }];
		 		 
 		 showConfirmModel(roleArray);
  });

4. Bind the status of multiple selection boxes and total selection boxes through js, and then use the reverse operation to compare the number of selection boxes. If the total number is equal, all are selected, otherwise,

 $("#summerBox").click(function(){
	 
	 // Gets the status of the current multi selection box itself   
	 var currentStatus = this.checked;
	 
	 // Sets the other multiple selection boxes with the status of the current multiple selection box
	 
	 $(".itemBox").prop("checked",currentStatus);
	  
  });
  
  // Reverse operation of select all and deselect all 
  
  $("#rolePageBody").on("click",".itemBox",function(){
  
	  // Gets the number of currently selected itemboxes
	  var checkedBoxCount = $(".itemBox:checked").length;
	  
	  // Get the total number of itemboxes
	  var totalBoxCount = $(".itemBox").length;
	  
	  // Use the comparison results to set the total checkbox
	  $("#summerBox").prop("checked",checkedBoxCount == totalBoxCount);
  });

5. to batch delete the click function binding, to traverse the currently selected multiple boxes, and then to the array, call the function previously declared.

// Click response function for batch deletion binding
  $("#batchRemoveBtn").click(function(){
	  
	  var roleArray = [];
	 
	  // Traverse the currently selected multiple selection box
	  $(".itemBox:checked").each(function(){
		 
		 // Use this to refer to the multiple selection boxes obtained by the current traversal
		  var roleId = this.id;
		 
		 //Get the role name through dom
		 var roleName = $(this).parent().next().text();
		 
		  roleArray.push({
			  "roleId":roleId,
			  "roleName":roleName 
			  
		  });
	  });
	  
	  // Check whether the length of roleArray is 0
	  if(roleArray.length == 0){
		  
	  layer.msg("Please select at least one to delete!");  
	  }else{
		  
	  showConfirmModel(roleArray);
	  }
	  
  });

class and id bound in html

<button type="button" id="batchRemoveBtn" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> delete</button>

var deleteBtn = "<button id='"+roleId+"' type='button'  class='btn btn-danger btn-xs deleteBtn'><i class=' glyphicon glyphicon-remove'></i></button>";