1 单条删除

无论是单条删除, 还是批量删除, 后台处理代码一致

my-js/my-role.js 的 fillTableBody 函数中在删除图标处添加 id
创建模态框 WEB-INF/modal-role-confirm.jsp

<%@ 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"><h4>请确认是否要删除下列角色：</h4><div id="roleNameDiv" style="text-align: center;"></div></div><div class="modal-footer"><button id="removeRoleBtn" type="button"class="btn btn-primary">确认删除</button></div></div></div>
</div>

WEB-INF/role-page.jsp引入模态框

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

删除图标,添加点击响应事件

$("#rolePageBody").on("click",".removeBtn",function(){// 获取角色名称var roleName = $(this).parent().prev().text();// 创建 role 对象存入数组var roleArray = [{roleId:this.id,roleName:roleName}];// 打开模态框showConfirmModal(roleArray);
});

WEB-INF/role-page.jsp 添加 ajax 代码, 执行删除

$("#removeRoleBtn").click(function(){// 从全局变量范围获取 roleIdArray，转换为 JSON 字符串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.operationResult;if(result == "SUCCESS") {layer.msg("删除成功！");// 重新加载分页数据generatePage();}if(result == "FAILED") {layer.msg("删除失败！" + response.operationMessage);}},"error":function(response){layer.msg(response.status + " " + response.statusText);}});// 关闭模态框$("#confirmModal").modal("hide");
});

2 批量删除

为多选框 checkbox 绑定点击响应函数

$("#summaryBox").click(function(){// 获取当前多选框自身的状态var currentStatus = this.checked;// 用当前多选框的状态设置其他多选框$(".itemBox").prop("checked", currentStatus);
});

WEB-INF/role-page.jsp 添加 ajax 代码, 全选、全不选操作

$("#rolePageBody").on("click",".itemBox",function(){// 获取当前已经选中的.itemBox的数量var checkedBoxCount = $(".itemBox:checked").length;// 获取全部.itemBox的数量var totalBoxCount = $(".itemBox").length;// 使用二者的比较结果设置总的checkbox$("#summaryBox").prop("checked", checkedBoxCount == totalBoxCount);
});

批量删除按钮绑定点击响应事件

$("#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 的长度是否为0if(roleArray.length == 0) {layer.msg("请至少选择一个执行删除");return ;}// 调用专门的函数打开模态框showConfirmModal(roleArray);
});

my-js/my-role.js 添加

// 显示删除模态框
function showConfirmModal(roleArray) {// 打开模态框$("#confirmModal").modal("show");// 清除旧的数据$("#roleNameDiv").empty();// 在全局变量范围创建数组用来存放角色idwindow.roleIdArray = [];// 遍历 roleArray 数组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);}
}

com.turling.gatherStars.mvc.handler.RoleHandler 添加

@ResponseBody
@RequestMapping("/role/remove/by/role/id/array.json")
public ResultEntity<String> removeByRoleIdAarry(@RequestBody List<Integer> roleIdList) {roleService.removeRole(roleIdList);return ResultEntity.successWithoutData();
}

com.turling.gatherStars.service.api.RoleService 添加

void removeRole(List<Integer> roleIdList);

com.turling.gatherStars.service.impl.RoleServiceImpl 添加

public void removeRole(List<Integer> roleIdList) {RoleExample example = new RoleExample();RoleExample.Criteria criteria = example.createCriteria();// DELETE FROM t_role WHERE id IN (5,8,12);criteria.andIdIn(roleIdList);roleMapper.deleteByExample(example);
}

3 代码托管

将代码 push 到 git@gitee.com:turling/gather-stars.git

聚星Note08 - 角色维护(3)相关推荐

聚星Note06 - 角色维护(1)
聚星Note06 - 角色维护1 1 创建实体 1.1 数据库建表 1.2 创建角色视图 2 分页 2.1 初始化数据, 引入自定义 js 文件 2.2 自定义 js 文件 2.3 实现后台业务逻辑 ...
day04【后台】角色维护
day04[后台]角色维护 1.权限控制 1.1.为什么需要权限控制如果没有权限控制, 系统的功能完全不设防, 全部暴露在所有用户面前. 用户登录以后可以使用系统中的所有功能. 这是实际运行中不能接 ...
尚筹网 —— 5、角色维护
目录 1.角色分页操作 1.1.目标 1.2.思路 1.3.代码 1.3.1.创建数据库表 1.3.2.逆向生成相关资源 1.3.3.准备查询的 SQL 语句 1.3.4.添加 mapper 方法 1 ...
众筹网角色维护【异步请求】
思维导图前端 controller 消息转换器@RespondBody 前端拼接数据加上清空,不然数据会堆积在框里不是更新
聚星Note04 - 管理员登录
聚星Note04 - 管理员登录 1 整合静态资源 1.1 关联登录请求地址和视图 1.2 维护项目所需常量类 1.3 小技巧 - idea 正常显示子包 1.4 修饰 system-error.js ...
day05【后台】菜单维护
day05[后台]菜单维护 1.数据库中存储树形结构 1.1.节点类型 1.2.创建菜单表执行SQL语句创建数据库表 USE project_crowd CREATE TABLE t_menu (i ...
iMatrix平台的权限管理系统是一个基于角色的访问控制系统
iMatrix平台的权限管理系统(ACS)是一个基于角色的访问控制(Role-Based Access Control)系统.熟悉RBAC的朋友应该知道,在RBAC中,权限和角色是相关的,用户通过成 ...
众筹网站项目第七天之用户角色分配(1)
打开原教程视频注:本人是渣渣,有错请谅解. 实现用户角色分配功能 1.数据准备 insert into `t_role` (`id`, `name`) values('1','PM - 项目经理') ...
后台管理系统中的CRUD【以用户维护为例】
1.前端页面展示后台管理主要具有三大功能,分别为权限管理.业务审核和业务管理,其中权限管理又分为用户维护.角色维护和菜单维护,这三个维护功能在后端实现上来说,大同小异,都是CRUD,因此这边以用户维 ...

聚星Note08 - 角色维护(3)

聚星Note08 - 角色维护3

1 单条删除

2 批量删除

3 代码托管

聚星Note08 - 角色维护(3)相关推荐

最新文章

热门文章