尚筹网 —— 5、角色维护
2024-06-18 00:37:43
目录
1、角色分页操作
1.1、目标
1.2、思路
1.3、代码
1.3.1、创建数据库表
1.3.2、逆向生成相关资源
1.3.3、准备查询的 SQL 语句
1.3.4、添加 mapper 方法
1.3.5、添加 service 层方法
1.3.6、添加 handle 方法
1.3.7、配置 view-controller
1.3.8、修改"角色维护"超链接的地址
1.3.9、创建 role-page.jsp 页面
1.3.10、创建导入自己的 js
遇到的问题：layer.msg 弹窗乱码
2、角色关键词查询
2.1、目标
2.2、思路
2.3、代码
3、角色保存
3.1、目标
3.2、思路
3.3、代码
3.3.1、创建模态框页面
3.3.2、在显示角色页面引入模态框页面
3.3.3、修改新增按钮
3.3.4、为新增按钮设定 id 并绑定单击事件
3.3.5、完成保存角色的 service 层方法
3.3.6、完成保存角色的 handle 方法
4、更新
4.1、思路
4.2、代码
4.2.1、创建更新的模态框页面
4.2.2、在显示角色页面引入更新的模态框
4.2.3、打开模态框时回显数据
4.2.4、保存更新的角色信息
5、删除角色
5.1、目标
5.2、思路
5.3、代码
5.3.1、完成批量删除角色的 service 层方法
5.3.2、完成批量删除角色的 handle 方法
5.3.3、创建确认删除模态框
5.3.4、在显示角色信息页面引入确认删除模态框、
5.3.5、创建专门用于显示删除角色时的确认模态框的函数
5.3.6、给确认删除模态框的确认删除按钮绑定单击事件执行删除操作
5.3.7、完成单条删除功能
5.3.8、完成批量删除功能
5.3.9、批量删除后若勾选了全选复选框应该取消勾选
1、角色分页操作
1.1、目标
将角色数据进行分页显示
1.2、思路
1.3、代码
1.3.1、创建数据库表
CREATE TABLE `project_crowd`.`t_role`( `id` INT NOT NULL AUTO_INCREMENT,`name` CHAR(100),PRIMARY KEY (`id`)
); 1.3.2、逆向生成相关资源
<!-- 数据库表名字和我们的entity 类对应的映射指定--><!--<table tableName="t_admin" domainObjectName="Admin" />--><table tableName="t_role" domainObjectName="Role" />双击
给生成的 Role 实体类添加 无参构造、全参构造、toString方法
将生成的资源归位
1.3.3、准备查询的 SQL 语句
<select id="selectRoleByKeyword" resultMap="BaseResultMap">select id, namefrom t_rolewhere name like concat("%", #{keyword}, "%")</select>1.3.4、添加 mapper 方法
/*** 根据关键词查询角色* @param keyword 关键词* @return*/List<Role> selectRoleByKeyword(String keyword);1.3.5、添加 service 层方法
RoleService
package com.atguigu.crowd.service.api;import com.atguigu.crowd.entity.Role;
import com.github.pagehelper.PageInfo;/*** @Author zhang* @Date 2022/5/6 - 21:57* @Version 1.0*/
public interface RoleService {/*** 根据关键词分页查询* @param pageNum 页码数* @param pageSize 每页的数据量* @param keyword 关键词* @return*/PageInfo<Role> getPageInfo(Integer pageNum, Integer pageSize, String keyword);}
RoleServiceImpl
package com.atguigu.crowd.service.impl;import com.atguigu.crowd.entity.Role;
import com.atguigu.crowd.mapper.RoleMapper;
import com.atguigu.crowd.service.api.RoleService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;/*** @Author zhang* @Date 2022/5/6 - 21:57* @Version 1.0*/
@Service
public class RoleServiceImpl implements RoleService {@Autowiredprivate RoleMapper roleMapper;/*** 根据关键词分页查询* @param pageNum 页码数* @param pageSize 每页的数据量* @param keyword 关键词* @return*/@Overridepublic PageInfo<Role> getPageInfo(Integer pageNum, Integer pageSize, String keyword) {// 开启分页功能PageHelper.startPage(pageNum, pageSize);// 执行查询List<Role> roles = roleMapper.selectRoleByKeyword(keyword);// 封装为PageInfo对象返回return new PageInfo<>(roles);}
}
1.3.6、添加 handle 方法
package com.atguigu.crowd.mvc.handle;import com.atguigu.crowd.entity.Role;
import com.atguigu.crowd.service.api.RoleService;
import com.atguigu.crowd.util.ResultEntity;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;/*** @Author zhang* @Date 2022/5/6 - 22:00* @Version 1.0*/
@Controller
public class RoleHandle {@Autowiredprivate RoleService roleService;/*** 根据关键字分页获取角色信息* @param pageNum 页码数* @param pageSize 每页的数据量* @param keyword 关键字* @return*/@ResponseBody@RequestMapping("/role/get/page/info.json")public ResultEntity<PageInfo<Role>> getPageInfo(@RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,@RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize,@RequestParam(value = "keyword", defaultValue = "") String keyword){PageInfo<Role> pageInfo = roleService.getPageInfo(pageNum, pageSize, keyword);// 若上面的操作抛出异常，交给异常映射机制处理return ResultEntity.successWithData(pageInfo);}}
1.3.7、配置 view-controller
spring-web-mvc.xml
<mvc:view-controller path="/role/to/page.html" view-name="role-page"/>1.3.8、修改"角色维护"超链接的地址
include-sidebar.jsp
<li style="height:30px;"><a href="/role/to/page.html"><i class="glyphicon glyphicon-king"></i> 角色维护</a></li>1.3.9、创建 role-page.jsp 页面
在 atcrowdfunding01-admin-parent\atcrowdfunding02-admin-webui\src\main\webapp\WEB-INF 下创建
<%--Created by IntelliJ IDEA.User: zhangDate: 2022/5/6Time: 23:55To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp" %><%-- 引入Pagination插件 --%>
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="jquery/jquery.pagination.js"></script><script type="text/javascript" src="crowd/my-role.js"></script>
<script type="text/javascript">$(function (){// 为分页操作准备初始化数(全局变量)window.pageNum = 1;window.pageSize = 5;window.keyword = "";// 调用执行分页的函数，显示分页效果generatePage();});
</script><body><%@include file="/WEB-INF/include-nav.jsp" %><div class="container-fluid"><div class="row"><%@include file="/WEB-INF/include-sidebar.jsp" %><div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3></div><div class="panel-body"><form class="form-inline" role="form" style="float:left;"><div class="form-group has-feedback"><div class="input-group"><div class="input-group-addon">查询条件</div><input class="form-control has-success" type="text" placeholder="请输入查询条件"></div></div><button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button></form><button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button><button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='form.html'"><i class="glyphicon glyphicon-plus"></i> 新增</button><br><hr style="clear:both;"><div class="table-responsive"><table class="table table-bordered"><thead><tr><th width="30">#</th><th width="30"><input type="checkbox"></th><th>名称</th><th width="100">操作</th></tr></thead><tbody id="rolePageBody"></tbody><tfoot><tr><td colspan="6" align="center"><div id="Pagination" class="pagination"></div></td></tr></tfoot></table></div></div></div></div></div>
</div></body>
</html>1.3.10、创建导入自己的 js
遇到的问题：layer.msg 弹窗乱码
将 my-role.js 文件的编码格式改为 UTF-8 bom
创建自己的 js 代码
/*** 执行分页，生成页面效果，任何时候调用这个函数都会重新加载页面*/
function generatePage(){// 获取分页数据var pageInfo = getPageInfoRemote();// 填充表格fillTableBody(pageInfo);}/*** 远程访问服务器端程序获取pageInfo数据*/
function getPageInfoRemote(){// 调用$.ajax()函数发送请求并接受$.ajax()函数的返回值var ajaxResult = $.ajax({"url" : "role/get/page/info.json","type" : "post","data" : {"pageNum" : window.pageNum,"pageSize": window.pageSize,"keyword" : window.keyword},"dataType" : "json","async" : false, // 由于成功后才可以获取到pageInfo对象，所以需要改为同步模式});console.log(ajaxResult);// 判断当前响应状态码是否为200(成功)var statusCode = ajaxResult.status;if(statusCode != 200){// 请求处理失败，像是提示消息，使当前函数停止执行layer.msg("服务器端成勋调用失败！响应状态码是" + statusCode + "说明信息：" + ajaxResult.statusText);return null;}// 若响应状态码为200，说明请求处理成功，获取pageInfovar resultEntity = ajaxResult.responseJSON;// 从resultEntity获取result属性var result = resultEntity.result;// 判断result是否成功if(result == "FAILED"){layer.msg(resultEntity.message);return null;}// 确认result为成功后获取pageInfo并返回var pageInfo = resultEntity.data;return pageInfo;
}/*** 填充表格* @param pageInfo*/
function fillTableBody(pageInfo){// 清除tBody中旧的数据，删除分页条(以免没有数据但还显示分页条)$("#rolePageBody").empty();$("#Pagination").empty()// 判断pageInfo是否有效if(pageInfo == null || pageInfo == undefined || pageInfo.list == null || pageInfo.list.length == 0){// pageInfo无效，输出提示$("#rolePageBody").append("<tr><td colspan='4' align='center'>抱歉！没有查询到您要的数据！</td></tr>");return;}// pageInfo有效，使用pageInfo的list属性填充tBodyfor(var i = 0; i < pageInfo.list.length; i++){var role = pageInfo.list[i];var roleId = role.id;var roleName = role.name;var numberTd = "<td>" + (i + 1) + "</td>";var checkboxTd = "<td><input type='checkbox'></td>";var roleNameTd = "<td>" + roleName +"</td>";var checkBtn = "<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>";var pencilBtn = "<button type='button' class='btn btn-primary btn-xs'><i class=' glyphicon glyphicon-pencil'></i></button>";var removeBtn = "<button type='button' class='btn btn-danger btn-xs'><i class=' glyphicon glyphicon-remove'></i></button>";var buttonTd = "<td>" + checkBtn + " " + pencilBtn + " " + removeBtn + "</td>";var tr = "<tr>" + numberTd + checkboxTd + roleNameTd + buttonTd + "</tr>";$("#rolePageBody").append(tr);}// 生成分页导航条generateNavigator(pageInfo);
}/*** 生成分页页码导航条* @param pageInfo*/
function generateNavigator(pageInfo){// 获取总记录数var totalRecord = pageInfo.total;// 声明相关属性var properties = {"num_edge_entries": 3, // 边缘页数，如 1,2,3...20,21,22,...50,51,52 的边缘页数为3(1,2,3 50,51,52)"num_display_entries": 3, // 主体页数"callback": paginationCallBack, // 用户点击翻页的按钮时跳转页面的回调函数"items_per_page": pageInfo.pageSize, // 每页显示的数据量"current_page": pageInfo.pageNum - 1, // 当前选中的页面，Pagination内部使用pageIndex来管理页面，pageIndex从0开始，pageNum从1开始，所以要减一"prev_text": "上一页", // “前一页”分页按钮上显示的文本，默认是"Next""next_text": "下一页", // “下一页”分页按钮上显示的文本，默认是"Next"}// 调用初始化函数$("#Pagination").pagination(totalRecord, properties);
}/*** 翻页时的回调函数* @param pageIndex* @param jQuery*/
function paginationCallBack(pageIndex, jQuery){// 修改window对象的pageNum属性(从0开始)window.pageNum = pageIndex + 1;// 调用分页函数generatePage();// 取消页码超链接的默认行为return false;
}2、角色关键词查询
2.1、目标
把页面上的“查询”表单和已经封装好的执行分页的函数连起来即可。
2.2、思路
2.3、代码
① 为查询按钮设置 id
<button id="searchBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询
</button>② 为查询条件的输入框设置 id
<input id="keywordInput" class="form-control has-success" type="text" placeholder="请输入查询条件">③ 为查询按钮绑定单击事件
// 给查询按钮绑定单击事件$("#searchBtn").click(function (){// 获取关键词数据复制给对应的全局变量window.keyword = $("#keywordInput").val();// 设置跳转回第一页window.pageNum = 1;// 刷新页面generatePage();});3、角色保存
3.1、目标
通过在打开的模态框中输入角色名称，执行对新角色的保存。
3.2、思路
3.3、代码
3.3.1、创建模态框页面
<%--Created by IntelliJ IDEA.User: zhangDate: 2022/5/7Time: 21:08To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %><div id="addModel" 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"><form class="form-signin" role="form"><div class="form-group has-success has-feedback"><input type="text" name="roleName" value="tom" class="form-control"id="inputSuccess4" placeholder="请输入角色名称" autofocus></div></form></div><div class="modal-footer"><button type="button" class="btn btn-primary">保存</button></div></div></div>
</div>3.3.2、在显示角色页面引入模态框页面
可以在最后引入，因为刚打开页面模态框是不显示的
<%@include file="/WEB-INF/model-role-add.jsp"%>3.3.3、修改新增按钮
role-page.jsp ：去掉原来的 onclick 属性
<button type="button" id="showAddModelBtn" class="btn btn-primary" style="float:right;"><i class="glyphicon glyphicon-plus"></i> 新增
</button>3.3.4、为新增按钮设定 id 并绑定单击事件
// 点击新增按钮打开模态框$("#showAddModelBtn").click(function (){$("#addModel").modal("show");}); // 给新增模态框的保存按钮绑定单击事件$("#saveRoleBtn").click(function (){// 获取用户在文本框输入的角色名称// $.trim() 去掉首尾空格// addModel 后面的空格表示addModel的后代元素var roleName = $.trim($("#addModel [name=roleName]").val());// 发送Ajax请求$.ajax({"url" : "role/save.json","type" : "post","data" : {"name" : roleName},"dataType" : "json","success" : function (response){var result = response.result;if(result == "SUCCESS"){layer.msg("操作成功！");}if(result == "FAILED"){layer.msg("操作失败！" + response.message);}// 重新加载分页数据window.pageNum = 999999;generatePage();},"error" : function (response){layer.msg(response.status + " " + response.statusText);}});// 关闭模态框$("#addModel").modal("hide");// 清理模态框$("addModel [name=roleName]").val("");3.3.5、完成保存角色的 service 层方法
RoleService
/*** 保存角色信息* @param role 要保存的角色信息*/void saveRole(Role role);RoleServiceImpl
/*** 保存角色信息* @param role 要保存的角色信息*/@Overridepublic void saveRole(Role role) {roleMapper.insert(role);}3.3.6、完成保存角色的 handle 方法
RoleHandle
/*** 保存角色信息* @param role 要保存的角色信息* @return*/@ResponseBody@RequestMapping("/role/save.jsp")public ResultEntity<String> saveRole(Role role){roleService.saveRole(role);return ResultEntity.successWithoutData();}4、更新
4.1、思路
4.2、代码
4.2.1、创建更新的模态框页面
在 WEB-INF 下创建 model-role-edit.jsp
<%--Created by IntelliJ IDEA.User: zhangDate: 2022/5/7Time: 21:08To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %><div id="editModel" 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"><form class="form-signin" role="form"><div class="form-group has-success has-feedback"><input type="text" name="roleName" class="form-control"placeholder="请输入角色名称" autofocus></div></form></div><div class="modal-footer"><button id="updateRoleBtn" type="button" class="btn btn-success">更新</button></div></div></div>
</div>4.2.2、在显示角色页面引入更新的模态框
<%@include file="/WEB-INF/model-role-edit.jsp"%>4.2.3、打开模态框时回显数据
① 修改显示角色页面的修改按钮
my-role.js
// 通过id属性(或其他属性)把roleId值传递到button按钮的单击响应函数中，在单击响应函数中用this.id获取var pencilBtn = "<button id='" + roleId + "' type='button' class='btn btn-primary btn-xs pencilBtn'><i class=' glyphicon glyphicon-pencil'></i></button>";
② 给修改按钮绑定单击事件
// 给修改按钮绑定单击事件// $(".pancilBtn").click(function ()); 方式绑定单击事件只能在第一页有效，翻页后就失效了/*// $(".pencilBtn").click(function(){}); 这种事件绑定方式只能在第一个页面有效，翻页后失效了// 使用jQuery对象的on()函数可以解决上面问题// ①首先找到所有“动态生成”的元素所附着的“静态”元素(静态父元素)，这里就是表格的tBody标签// ②on()函数的第一个参数是事件类型// ③on()函数的第二个参数是找到真正要绑定事件的元素的选择器// ③on()函数的第三个参数是事件的响应函数*/$("#rolePageBody").on("click", ".pencilBtn", function (){// 打开更新的模态框$("#editModel").modal("show");// 获取表格中当前行的角色名称// 修改按钮的父元素是<td>，这个<td>的文本就是roleNamevar roleName = $(this).parent().prev().text();// 获取当前角色的id(修改按钮的id属性被动态赋值为roleId)，由于更新按钮和修改按钮不在同一个函数，这里用全局变量，以便接收window.roleId = this.id;// 回显roleName$("#editModel [name=roleName]").val(roleName);});4.2.4、保存更新的角色信息
① 为更新模态框的更新按钮绑定单击事件
// 给更新模态框的更新按钮绑定单击事件$("#updateRoleBtn").click(function (){// 获取新的角色名称var roleName = $("#editModel [name=roleName]").val();$.ajax({"url" : "role/update.json","type" : "post""data" : {"id" : window.roleId,"name" : roleName},"dataType" : "json","success" : function (response){var result = response.result;if(result == "SUCCESS"){layer.msg("操作成功！");// 重新加载分页数据generatePage();}if(result == "FAILED"){layer.msg("操作失败！" + response.message);}},"error" : function (response){layer.msg(response.status + " " + response.statusText);}});// 关闭模态框$("editModel").modal("show");});② 完成更新角色信息的 service 层方法
RoleService
/*** 更新角色信息* @param role 要更新的角色信息*/void updateRole(Role role);RoleServiceImpl
/*** 更新角色信息* @param role 要更新的角色信息*/@Overridepublic void updateRole(Role role) {roleMapper.updateByPrimaryKey(role);}③ 完成更新角色信息的 handle 方法
/*** 更新角色西信息* @param role 要更新的角色信息* @return*/@ResponseBody@RequestMapping("/role/update.json")public ResultEntity<String> updateRole(Role role){roleService.updateRole(role);return ResultEntity.successWithoutData();}5、删除角色
5.1、目标
前端的“单条删除”和“批量删除”在后端合并为同一套操作。合并的依据是：单条删除时 id 也放在数组中，后端完全根据 id 的数组进行删除。
5.2、思路
5.3、代码
5.3.1、完成批量删除角色的 service 层方法
RoleService
/*** 批量删除角色信息* @param roleIdList 要删除的多个角色的id*/void removeRole(List<Integer> roleIdList);RoleServiceImpl
/*** 批量删除角色信息* @param roleIdList 要删除的多个角色的id*/@Overridepublic void removeRole(List<Integer> roleIdList) {RoleExample roleExample = new RoleExample();RoleExample.Criteria criteria = roleExample.createCriteria();criteria.andIdIn(roleIdList);roleMapper.deleteByExample(roleExample);}5.3.2、完成批量删除角色的 handle 方法
/*** 批量删除角色信息* @param roleIdList 要删除的多个角色的id* @return*/@ResponseBody@RequestMapping("/role/remove/by/role/id/array.json")public ResultEntity<String> removeByRoleIdArray(@RequestBody List<Integer> roleIdList){roleService.removeRole(roleIdList);return ResultEntity.successWithData();}5.3.3、创建确认删除模态框
在 WEB-INF 目录下创建 model-role-confirm.jsp
<%--Created by IntelliJ IDEA.User: zhangDate: 2022/5/7Time: 21:08To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %><div id="confirmModel" 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"><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>5.3.4、在显示角色信息页面引入确认删除模态框、
role-page.jsp
<%@include file="/WEB-INF/model-role-confirm.jsp"%>5.3.5、创建专门用于显示删除角色时的确认模态框的函数
my-role.js
// 用于显示删除角色时的确认模态框
function showConfirmModal(roleArray){// 打开确认删除模态框$("#confirmModel").modal("show");// 清除旧数据$("#roleNameDiv").empty();// 在全局变量范围创建数组用来存放角色idwindow.roleArray = [];// 遍历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;window.roleArray.push(roleId);}
}5.3.6、给确认删除模态框的确认删除按钮绑定单击事件执行删除操作
role-page.jsp
// 为确认模态框的确认删除按钮绑定单击事件，执行删除操作$("#removeRoleBtn").click(function (){// 将全局变量的角色数组roleArray转为JSON字符串var requestBody = JSON.stringify(window.roleArray);$.ajax({"url" : "role/remove/by/role/id/array.json","type" : "post","data" : requestBody,"contentType" : "application/json;charset=UTF-8", // 由于请求体时JSON数据"dataType" : "json","success" : function (response){var result = response.result;if(result == "SUCCESS"){layer.msg("操作成功！");// 重新加载分页数据generatePage();}if(result == "FAILED"){layer.msg("操作失败！" + response.message);}},"error" : function (response){layer.msg(response.status + " " + response.statusText);}});// 关闭模态框$("#confirmModel").modal("hide");});5.3.7、完成单条删除功能
① 修改单条删除按钮的 class、id 属性
role-page.jsp
// 通过id属性(或其他属性)把roleId值传递到button按钮的单击响应函数中，在单击响应函数中用this.id获取var removeBtn = "<button id='" + roleId + "' type='button' class='btn btn-danger btn-xs removeBtn'><i class=' glyphicon glyphicon-remove'></i></button>";
② 给单条删除按钮绑定单击事件
role-page.jsp
// 给单条删除按钮绑定单击事件$("#rolePageBody").on("click", ".removeBtn", function (){// 从当前按钮出发获取角色名称var roleName = $(this).parent().prev().text();// 创建role对象存入数组var roleArray = [{"roleId" : this.id,"roleName" : roleName}];// 调用专门的函数打开模态框showConfirmModal(roleArray);});5.3.8、完成批量删除功能
① 为 全选 / 全不选 复选框添加 id 属性
role-page.jsp
<th width="30"><input id="summaryBox" type="checkbox"></th>② 为表格中的选择框添加 class 属性
var checkboxTd = "<td><input class='itemBox' type='checkbox'></td>";③ 给 全选/全不选 复选框绑定单击事件
role-page.jsp
// 给全选/全不选复选框绑定单击事件$("#summaryBox").click(function (){// 获取当前复选框的状态var currentStatus = this.checked;// 给其他复选框赋值$(".itemBox").prop("checked", currentStatus);});④ 设置 全选/全不选的反向操作
role-page.jsp
// 全选 / 全不选的反向操作$("#rolePageBody").on("click", ".itemBox", function (){// 获取当前已经选中的.itemBox的数量(checked表示被选中的)var checkedBoxCount = $(".itemBox:checked").length;//获取全部.itemBox的数量var totalBoxCount = $(".itemBox").length;$("#summaryBox").prop("checked", checkedBoxCount == totalBoxCount);});⑤ 给批量删除按钮设置 id 属性
<button id="batchRemoveBtn" type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>⑥ 给每个复选框设置 id 属性
my-role.js
var checkboxTd = "<td><input id='" + roleId + "' class='itemBox' type='checkbox'></td>";⑦ 给批量删除按钮绑定单击事件
// 给批量删除的按钮绑定单击响应函数$("#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的长度if (roleArray.length == 0) {layer.msg("请至少选择一个执行删除操作！");return;}// 调用执行删除操作showConfirmModal(roleArray);});5.3.9、批量删除后若勾选了全选复选框应该取消勾选
role-page.jsp
在确认删除模态框的确认按钮的单击事件的末尾判断是否勾选了全选复选框，若勾选了，赋值为未勾选给
// 为确认模态框的确认删除按钮绑定单击事件，执行删除操作$("#removeRoleBtn").click(function (){// 将全局变量的角色数组roleArray转为JSON字符串var requestBody = JSON.stringify(window.roleArray);$.ajax({"url" : "role/remove/by/role/id/array.json","type" : "post","data" : requestBody,"contentType" : "application/json;charset=UTF-8", // 由于请求体时JSON数据"dataType" : "json","success" : function (response){var result = response.result;if(result == "SUCCESS"){layer.msg("操作成功！");// 重新加载分页数据generatePage();}if(result == "FAILED"){layer.msg("操作失败！" + response.message);}},"error" : function (response){layer.msg(response.status + " " + response.statusText);}});// 关闭模态框$("#confirmModel").modal("hide");// 若为批量删除且勾选了全选，删除后要取消勾选全选if($("#summaryBox").is(":checked")){$("#summaryBox").prop("checked", false);}});尚筹网 —— 5、角色维护相关推荐
- SSM 尚筹网 Vue3 + Vite + Java
SSM 尚筹网 2022年3月27日15:07:51 文章目录 SSM 尚筹网 1.Maven结构: 1.基于Maven的MyBatis逆向工程 2.资源归为 3. 父工程管理 4.SSM整合步骤 4 ...
- 尚筹网（众筹项目实战）
尚筹网是一个在线众筹平台,通过向普通大众募集资金来支持创业项目,支持者可以获得与支持金额相当的回报.该项目视频在学习路线中的定位是:从单一架构到分布式架构的过渡阶段,适合学完SSM框架后,需要通过一个 ...
- 【尚筹网】IDEA版实现（九）会员登录
由于尚硅谷的视频是通过Eclipse软件来做的,其中有些操作与IDEA上有所区别,所以我在这里将IDEA区别于Eclipse的操作.操作过程中涉及的源码(与视频的源码略有出入)以及大家可能遇到的种种问 ...
- 【尚筹网】IDEA版实现（十二）项目展示
由于尚硅谷的视频是通过Eclipse软件来做的,其中有些操作与IDEA上有所区别,所以我在这里将IDEA区别于Eclipse的操作.操作过程中涉及的源码(与视频的源码略有出入)以及大家可能遇到的种种问 ...
- 【尚筹网】IDEA版实现（八）前台环境配置
由于尚硅谷的视频是通过Eclipse软件来做的,其中有些操作与IDEA上有所区别,所以我在这里将IDEA区别于Eclipse的操作.操作过程中涉及的源码(与视频的源码略有出入)以及大家可能遇到的种种问 ...
- 【尚筹网项目】 三、【后台】 管理员信息维护
管理员信息维护 一.分页显示管理员信息部分 (1) 思路 (2) 技术点 ① 让 SQL 语句针对 keyword 时有时无的情况进行适配 ② PageHelper 使用 ③ 显示页码 (3) 后端代 ...
- 尚筹网-前台-会员系统（springboot,springcloud 实战）
总目标: 环境搭建 会员登录注册 发起众筹项目 展示众筹项目 支持众筹项目 订单 支付 1. 会员系统架构 1.1 架构图 1.2 需要创建的工程 父工程.聚合工程:shangcouwang01-m ...
- 尚筹网 —— 4、[知识] RBAC 权限控制模型 和 Ajax请求
目录 1.简介 1.1.为什么要进行权限控制? 1.2.什么是权限控制 1.3.如何进行权限控制 1.3.1.定义资源 1.3.2.创建权限 1.3.3.创建角色 1.3.4.管理用户 1.3.5.建 ...
- 基于SPRINGBOOT尚筹网-创意产品众筹平台
开发工具(eclipse/idea): eclipse4.5/4.8或者idea2018,jdk1.8 数据库:mysql 功能模块: 1.完成登录注册功能 2.用户登录到主页后 页面显示产品的图片及 ...
最新文章
- Linux笔记：使用Vim编辑器
- 【Effective Java】3.单例
- 装饰器前奏2（2017年8月23日 11:50:39）（2017年8月29日 16:07:32）
- 【Transformer】PoolFormer: MetaFormer is Actually What You Need for Vision
- 基于小波包的图像压缩及matlab实现,基于小波包的图像压缩及matlab实现精选.doc...
- Faster R-CNN源码中ROI Pooling的解析
- 国土部明确地面光伏、分布式光伏用地政策
- keras: 用预训练的模型提取特征
- 【计算机组成原理】运算器组成实验
- solr6.5的分词
- BZOJ【1609】 麻烦的聚餐
- A fatal exception has occurred.Program will exit。可能是系统装有多个java编程程序。
- opencv将图像处理之后显示在label上（Mat转化为qimage）转换之后label显示全黑
- 2020最新版前端学习路线图--让前端学习变得美如画
- 认识Innodb存储引擎
- Springboot+vue调查问卷管理系统(带论文)
- 《张维迎：反思经济学》读后感作文4300字
- MVG读书笔记——相机模型
- 结对编程遇到猪队友，“你用的才是中华田园敏捷！”
- navbar-default /navbar-brand（logo栏）/navbar-text