尚筹网：角色维护之点击ok执行批量删除&单条删除

ゞ浴缸里的玫瑰 2023-06-27 14:58 8阅读 0赞

# 点击模态框ok按钮执行批量删除 #

## 标记OK按钮 ##

/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-modal-role-confirm.jsp中： id=“confirmModalBtn”  
![在这里插入图片描述][20200107113126152.png]

## 绑定单击响应函数 ##

/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp中：

// 给确认模态框中的OK按钮绑定单击响应函数
    $("#confirmModalBtn").click(function(){
        
    	
    	var requestBody = JSON.stringify(window.roleIdArray);
    	
    	$.ajax({
        
    		"url":"role/batch/remove.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("操作成功！");
    						
    				// 如果删除成功，则重新调用分页方法
    				showPage();
    			}
    			
    			if(result == "FAILED") {
        
    				layer.msg(response.message);
    			}
    					
    			// 不管成功还是失败，都需要关掉模态框
    			$("#confirmModal").modal("hide");
    			
    		},
    		"error":function(response){
        
    			layer.msg(response.message);
    		}
    	});
    	
    });

## 后端 ##

/atcrowdfunding-admin-2-component/src/main/java/com/atguigu/crowd/funding/handler/RoleHandler.java：

@ResponseBody
    @RequestMapping("/role/batch/remove")
    public ResultEntity<String> batchRemove(@RequestBody List<Integer> roleIdList) {
        
    	
    	roleService.batchRemove(roleIdList);
    	
    	return ResultEntity.successWithoutData();
    }

/atcrowdfunding-admin-2-component/src/main/java/com/atguigu/crowd/funding/service/impl/RoleServiceImpl.java：

@Override
    public void batchRemove(List<Integer> roleIdList) {
        
    	
    	RoleExample roleExample = new RoleExample();
    	
    	roleExample.createCriteria().andIdIn(roleIdList);
    	
    	roleMapper.deleteByExample(roleExample);
    }

# 单条删除 #

/atcrowdfunding-admin-1-webui/src/main/webapp/script/my-role.js

![在这里插入图片描述][20200107121230206.png]  
/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp

// 针对.removeBtn这样动态生成的元素对象使用on()函数方式绑定单击响应函数
    // $("动态元素所依附的静态元素").on("事件类型","具体要绑定事件的动态元素的选择器", 事件响应函数);
    $("#roleTableBody").on("click",".removeBtn", function(){
        
    	// 获取当前记录的roleId
    	var roleId = $(this).attr("roleId");
    	
    	// 存入全局变量数组
    	window.roleIdArray = new Array();
    	
    	window.roleIdArray.push(roleId);
    	
    	// 打开模态框（后续所有操作都和批量删除一样）
    	showRemoveConfirmModal();
    });

[20200107113126152.png]: https://img-blog.csdnimg.cn/20200107113126152.png
[20200107121230206.png]: https://img-blog.csdnimg.cn/20200107121230206.png