尚筹网：批量删除角色之准备

素颜马尾好姑娘i 2023-06-27 13:59 17阅读 0赞

# 准备模态框 #

1、在/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF下创建include-modal-role-confirm.jsp文件保存模态框内容：准备模态框的HTML标签

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <div id="confirmModal" class="modal fade" tabindex="-1" role="dialog">
    	<div class="modal-dialog" role="document">
    		<div class="modal-content">
    			<div class="modal-header">
    				<button type="button" class="close" data-dismiss="modal"
    					aria-label="Close">
    					<span aria-hidden="true">×</span>
    				</button>
    				<h4 class="modal-title">尚筹网系统弹窗</h4>
    			</div>
    			<div class="modal-body">
    				<p>您确定要删除下面的显示的内容吗？</p>
    				<table class="table table-bordered">
    					<thead>
    						<tr>
    							<th width="30">#</th>
    							<th>名称</th>
    						</tr>
    					</thead>
    					<tbody id="confirmModalTableBody"></tbody>
    				</table>
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-primary">OK</button>
    			</div>
    		</div>
    	</div>
    </div>

2、在role-page.jsp中包含include-modal-role-confirm.jsp文件：在最下面的body标签的前面

……
    	<%@ include file="/WEB-INF/include-modal-role-confirm.jsp" %>
    </body>

# getRoleListByRoleIdArray()函数 #

## 前端 ##

/atcrowdfunding-admin-1-webui/src/main/webapp/script/my-role.js里面添加函数：注意这是一个同步请求，必须等待响应返回才能判断是否请求成功

//根据roleIdArray查询roleList
    function getRoleListByRoleIdArray(roleIdArray) {
        
    	
    	// 1.将roleIdArray转换成JSON字符串
    	var requestBody = JSON.stringify(roleIdArray);
    	
    	// 2.发送Ajax请求
    	var ajaxResult = $.ajax({
        
    		"url":"role/get/list/by/id/list.json",
    		"type":"post",
    		"data":requestBody,
    		"contentType":"application/json;charset=UTF-8",
    		"dataType":"json",
    		"async":false
    	});
    	
    	// 3.获取JSON对象类型的响应体
    	var resultEntity = ajaxResult.responseJSON;
    	
    	// 4.验证是否成功
    	var result = resultEntity.result;
    	
    	if(result == "SUCCESS") {
        
    		
    		// 5.如果成功，则返回roleList
    		return resultEntity.data;
    	}
    	
    	if(result == "FAILED") {
        
    		layer.msg(resultEntity.message);
    		return null;
    	}
    	
    	return null;
    	
    }

## 后端 ##

/atcrowdfunding-admin-2-component/src/main/java/com/atguigu/crowd/funding/handler/RoleHandler.java中对应的后端代码：

// handler方法
    @ResponseBody
    @RequestMapping("/role/get/list/by/id/list")
    public ResultEntity<List<Role>> getRoleListByIdList(@RequestBody List<Integer> roleIdList) {
        
    	
    	List<Role> roleList = roleService.getRoleListByIdList(roleIdList);
    	
    	return ResultEntity.successWithData(roleList);
    }

/atcrowdfunding-admin-2-component/src/main/java/com/atguigu/crowd/funding/service/impl/RoleServiceImpl.java中对应的后端代码：

// service方法：
    @Override
    public List<Role> getRoleListByIdList(List<Integer> roleIdList) {
        
    	
    	// 预期的SQL语句
    	// select id,name from t_role where id in (1,2,3,6,12)
    	
    	// 创建实体类Role对应的Example对象
    	RoleExample roleExample = new RoleExample();
    	
    	// 在Example对象中封装查询条件
    	roleExample.createCriteria().andIdIn(roleIdList);
    	
    	// 执行查询
    	return roleMapper.selectByExample(roleExample);
    }

# showRemoveConfirmModal()函数 #

/atcrowdfunding-admin-1-webui/src/main/webapp/script/my-role.js里面添加函数

// 打开删除确认模态框
    function showRemoveConfirmModal() {
        
    	
    	// 1.将模态框显示出来  include-modal-role-confirm.jsp里面看到模态框的id是confirmModal
    	$("#confirmModal").modal("show");
    	
    	// 2.根据roleIdList获取roleList
    	var roleList = getRoleListByRoleIdArray(window.roleIdArray);
    	
    	// 3.清空#confirmModalTableBody： include-modal-role-confirm.jsp有
    	$("#confirmModalTableBody").empty();
    	
    	// 4.填充#confirmModalTableBody
    	for(var i = 0; i < roleList.length; i++) {
        
    		
    		// 5.获取角色相关数据
    		var role = roleList[i];
    		
    		var id = role.id;
    		
    		var name = role.name;
    		
    		var trHTML = "<tr><td>"+id+"</td><td>"+name+"</td></tr>";
    		
    		// 6.执行填充
    		$("#confirmModalTableBody").append(trHTML);
    	}
    	
    }