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

准备模态框

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">&times;</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);
	}
	
}