详细笔记的第一遍：学习ssm的整合-CRUD的第9天（2021-11-30）3
34、删除_实现批量删除。
注意：因为我们这里加入了一列，所以之前写的单个删除的方法里面。现在是第三列是empName。所以：
需要改成2.
这个删除按钮就是批量删除你已经选中的所有记录。
右键删除-》检查。
发现没有给这个批量删除的按钮id。
绑定批量删除按钮的点击事件：
只要点击批量删除按钮，就会显示这些选中的员工的empName。
进行二次确认。
遍历 五个里面被选中的元素，拿到这个选中的多选框对应这一行数据里面的empName。
这个多选框的所有父组件的里面的tr父组件的第三个tr的text值。
$(this).parents("tr").find("td:eq(2)").text();
如果选中的元素个数大于0个，就把所有选中元素的empName拼接成一个大字符串，逗号分隔，且去除最后一个逗号。
如果用户选择了确认批量删除，那么就发送ajax请求。
之前在controller层写了一个删除单个员工的控制方法。
现在将这个方法改造成删除批量和删除单个元素都调用它。
我们设计：
如果批量删除，那么传过来的就是字符串1-2-3
以-分隔 多个id值。
controller方法：
//这里是用来删除指定id的员工数据(可以删除多个id，也可以单个删除)
@ResponseBody
@RequestMapping(value = "/emp/{empIds}",method = RequestMethod.DELETE)
public Msg deleteEmpByEmpId(@PathVariable("empIds") String empIds){
if (empIds.contains("-")){
String[] empIds_Arr = empIds.split("-");
ArrayList<Integer> ids_list = new ArrayList<>();
for (String empId : empIds_Arr) {
ids_list.add(Integer.valueOf(empId));
}
employeeService.deleteEmpByIds(ids_list);
}else{
Integer empId = Integer.valueOf(empIds);
employeeService.deleteEmpById(empId);
}
return Msg.success();
}
Service层：
//删除指定id的员工数据
public void deleteEmpById(Integer empId){
employeeMapper.deleteByPrimaryKey(empId);
}
//删除多个员工id数据
public void deleteEmpByIds(List<Integer> empIds){
EmployeeExample example = new EmployeeExample();
EmployeeExample.Criteria criteria = example.createCriteria();
criteria.andEmpIdIn(empIds);
employeeMapper.deleteByExample(example);
}
批量删除按钮的点击事件：
//绑定全选或者全不选按钮的点击事件：
$("#check_all").click(function (){
//拿到标题列里面的选中状态
var isChecked = $(this).prop("checked");
//让下面的五个多选框的选中状态和标题列保持一致。
$(".check_item").prop("checked",isChecked);
});
//绑定下面五个里面的每一个单击事件
$(document).on("click",".check_item",function (){
//拿到当前五个里面选中了多少个：
var checkedNum = $(".check_item:checked").length;
//判断当前选中的个数是否等于所有的多选框个数
var isEqual = checkedNum == $(".check_item").length;
//所以标题列的选中状态和isEqual保持一致。
$("#check_all").prop("checked",isEqual);
});
//给批量删除按钮绑定单击事件：
$("#emp_delete_all_btn").click(function (){
var empNames = "" ;
var empIds = "" ;
if($(".check_item:checked").length > 0) {
$.each($(".check_item:checked"), function () {
//this对象代表当前选中的多选框。
var currentEmpName = $(this).parents("tr").find("td:eq(2)").text();
var currentEmpId = $(this).parents("tr").find("td:eq(1)").text();
empNames += currentEmpName + ",";
empIds += currentEmpId + "-";
});
//去除empNames后面的逗号。采用字符串的substring方法
empNames = empNames.substring(0,empNames.length-1);
empIds = empIds.substring(0,empIds.length-1);
if (confirm("确认批量删除【" + empNames + "】吗？")) {
//如果点击了确认就发送ajax请求，直接批量删除DB中的数据，并回到当前页。
$.ajax({
url:"${APP_PATH}/emp/"+empIds,
type:"DELETE",
success:function (result){
alert(result.msg);
//跳转到当前页面
to_page(currentPage);
}
});
}
}else{
alert("没有选择要删除的元素！");
}
});
测试批量删除：
点击确定：
所有的index.jsp代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>首页</title>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<!-- 员工修改按钮的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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-horizontal" id="empUpdateModalForm">
<div class="form-group">
<label class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<p class="form-control-static" id="empName_update_static"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@qq.com">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">gender</label>
<div class="col-sm-10" id="emp_gender_radio_update">
<label class="radio-inline">
<input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2_update_input" value="F"> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">deptName</label>
<div class="col-sm-4">
<select class="form-control" name="dId" id="dept_update_select">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
</div>
</div>
</div>
</div>
<!-- 员工新增按钮的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">员工添加</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="empAddModalForm">
<div class="form-group">
<label class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@qq.com">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2_add_input" value="F"> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">deptName</label>
<div class="col-sm-4">
<select class="form-control" name="dId" id="dept_add_select">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<%--显示标题--%>
<div class="row">
<div class="col-md-12">
<h1>SSM_CRUD</h1>
</div>
</div>
<%--按钮--%>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
<button class="btn btn-danger" id="emp_delete_all_btn">批量删除</button>
</div>
</div>
<%--表格数据--%>
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>
<input type="checkbox" id="check_all">
</th>
<th>#</th>
<th>empName</th>
<th>email</th>
<th>gender</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<%--分页信息--%>
<div class="row">
<%--分页文字信息--%>
<div class="col-md-6" id="page_info_area"></div>
<%--分页条信息--%>
<div class="col-md-6" id="page_nav_area">
</div>
</div>
</div>
<script type="text/javascript">
var totalRecord,currentPage;
$(function (){
//首页加载结束就去第一页
to_page(1);
});
function to_page(pn){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function (result) {
// console.log(result);
//1、解析员工数据：
build_emp_table(result);
//显示分页数据：
build_page_info(result);
//显示分页条数据
build_page_nav(result);
}
});
}
//这个方法是用来显示员工数据的。
function build_emp_table(result){
$("#emps_table tbody").empty();
var emps = result.extend.pageInfo.list;
$.each(emps,function (index, item) {
//每一个员工数据前面都需要有个多选框：
var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>").append(item.department.deptName);
var editBtnTd = $("<button></button>")
.addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
.append("编辑");
//给这个编辑按钮添加一个自定义的属性，来表示当前员工的id
editBtnTd.attr("edit-id",item.empId);
var delBtnId = $("<button></button>")
.addClass("btn btn-danger btn-sm delete_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash"))
.append("删除");
//给这个删除按钮添加一个自定义的属性，来表示当前员工的id
delBtnId.attr("delete-id",item.empId);
var btnTd = $("<td></td>")
.append(editBtnTd)
.append(" ")
.append(delBtnId);
$("<tr></tr>") .append(checkBoxTd)
.append(empIdTd)
.append(empNameTd)
.append(emailTd)
.append(genderTd)
.append(deptNameTd)
.append(btnTd)
.appendTo("#emps_table tbody");
});
}
//这个方法是用来显示分页信息的。
function build_page_info(result){
$("#page_info_area").empty();
$("#page_info_area")
.append("当前第"+result.extend.pageInfo.pageNum +"页，" +
"总共"+ result.extend.pageInfo.pages+"页，" +
"总共"+ result.extend.pageInfo.total+"条记录");
//这个是总记录数
totalRecord = result.extend.pageInfo.total;
//这个是当前页码
currentPage = result.extend.pageInfo.pageNum;
}
//这个方法是用来显示分页条数据的。并且绑定动作，可以具体跳到相应的页面。
function build_page_nav(result){
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
if(result.extend.pageInfo.hasPreviousPage == false){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}else{
firstPageLi.click(function(){
to_page(1);
});
prePageLi.click(function(){
to_page(result.extend.pageInfo.pageNum - 1);
});
}
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}else{
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum + 1);
});
lastPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
});
}
//构造添加首页和前一页
ul.append(firstPageLi).append(prePageLi);
//遍历给ul添加页码提示
$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
var numLi = $("<li></li>").append($("<a></a>").append(item ));
if(result.extend.pageInfo.pageNum == item){
numLi.addClass("active");
}
numLi.click(function(){
to_page(item);
});
ul.append(numLi);
});
//最后添加下一页和末页提示。
ul.append(nextPageLi).append(lastPageLi);
//把ul添加到nav中
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//点击新增按钮的时候，完整重置表单。（包括内容和样式）
function reset_form(ele){
//1、清空表单内容
$(ele)[0].reset();
//2、清空表单样式：
$(ele).find("*").removeClass("has-error has-success");
$(ele).find(".help-block").text("");
}
//绑定新增按钮的点击事件
$("#emp_add_modal_btn").click(function(){
//每次点击新增按钮的时候，对表单的内容进行重置
reset_form("#empAddModalForm");
//1、点击新增按钮，先发送ajax请求查DB中，拿到部门表的数据，显示在下拉列表中。
getDepts("#dept_add_select");
//2、然后再：触发新增模态框的弹出，并设置一些属性
$("#empAddModal").modal({
//这个属性的意思：弹出的模态框永远置于屏幕顶部，就算鼠标点击其他地方，这个模态框也不会消失
backdrop:"static"
});
});
//查DB的部门数据，放到下拉列表里面
function getDepts(ele){
$(ele).empty();
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
success:function (result){
$.each(result.extend.depts,function (){
//不传参数，使用this来代表当前对象
//构建option
var optionEle = $("<option></option>")
.append(this.deptName)
.attr("value",this.id);
optionEle.appendTo(ele);
});
}
});
}
function show_validate_msg(ele,status,msg){
//清空状态
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if("success" == status){//符合正则规则
//1、给文本框的父元素添加一个has-error的类
$(ele).parent().addClass("has-success");
//2、给这个文本框下面的span标签定义文本信息，也就是它输错了的时候显示的话
$(ele).next("span").text(msg);
}else if("error" == status){//不符合
//1、给文本框的父元素添加一个has-error的类
$(ele).parent().addClass("has-error");
//2、给这个文本框下面的span标签定义文本信息，也就是它输错了的时候显示的话
$(ele).next("span").text(msg);
}
}
function validate_add_form(){
var empName = $("#empName_add_input").val();
var regName = /^([a-zA-Z0-9_-]|[\u4E00-\u9FA5]){2,20}$/;
if(!regName.test(empName)){//失败
show_validate_msg("#empName_add_input","error","用户名为2到12个字符，允许中文，英文大小写，数字，下划线，减号");
// alert("用户名可以是2-5位的中文或者6-16位的英文数字字符的组合")
return false;
}else{//成功
show_validate_msg("#empName_add_input","success","");
}
var email = $("#email_add_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){//失败
// alert("邮箱校验格式不正确")
show_validate_msg("#email_add_input","error","邮箱校验格式不正确");
return false;
}else{//成功
show_validate_msg("#email_add_input","success","");
}
return true;
}
//检查用户名文本框内容是否重复
$("#empName_add_input").change(function(){
var empName = this.value;
//发送ajax请求，校验员工用户名是否可用？
$.ajax({
url:"${APP_PATH}/checkEmpName",
data:"empName=" + empName,
type:"POST",
success:function (result){
if(result.code == 100){//后端返回的状态码100表示成功
show_validate_msg("#empName_add_input","success","用户名可用");
//在保存按钮的属性ajax-va上保存值：success
$("#emp_save_btn").attr("ajax-va","success");
}else{//后端返回的状态码200表示失败
show_validate_msg("#empName_add_input","error",result.extend.va_msg);
//在保存按钮的属性ajax-va上保存值：error
$("#emp_save_btn").attr("ajax-va","error");
}
}
});
});
//绑定模态框里面的保存按钮的点击事件。
$("#emp_save_btn").click(function (){
//对数据进行校验
if(!validate_add_form()){
return false;
}
//2、如果两个输入框都符合自定义的正则表达式，还要校验用户名是否填重复了。
if($("#emp_save_btn").attr("ajax-va")=="error"){
return false;
}
//对表单里面的数据新增到DB中
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$("#empAddModalForm").serialize(),
success:function (result){
//1、需要根据后端返回的result里面的状态码进行判断
if(result.code == 100){
//1、点击保存之后，关闭模态框
$("#empAddModal").modal("hide");
//2、点击保存之后，跳到页码为总记录数的地方，实际就是达到无论如何都是显示最后一页的效果
to_page(totalRecord);
}else{
//后端校验失败，打印失败信息
//有可能是邮箱也有可能是员工用户名错误，或者都错误
if(undefined != result.extend.errorFields.email){
show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
}
if(undefined != result.extend.errorFields.empName){
show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName);
}
}
}
});
});
//绑定编辑按钮的点击事件
$(document).on("click",".edit_btn",function(){
//查询部门信息，并显示在下拉列表里面
getDepts("#dept_update_select");
//查询员工信息
getEmp($(this).attr("edit-id"));
//这个：$(this).attr("edit-id")，就是当前待编辑的员工id，将这个id传给后面打开的更新模态框里面的更新按钮组件。
$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
//弹出模态框
$("#empUpdateModal").modal({
//这个属性的意思：弹出的模态框永远置于屏幕顶部，就算鼠标点击其他地方，这个模态框也不会消失
backdrop:"static"
});
});
//绑定单个删除按钮的点击事件
$(document).on("click",".delete_btn",function(){
// alert($(this).parents("tr").find("td:eq(1)").text());
var empName = $(this).parents("tr").find("td:eq(2)").text();
var empId = $(this).attr("delete-id");
if(confirm("你确认要删除【"+empName+"】吗？")){
//进来：说明点击了确认删除：
//如果是确认删除：那就发送ajax请求，去DB执行删除操作
$.ajax({
url:"${APP_PATH}/emp/"+empId,
type:"DELETE",
success:function (result){
alert(result.msg);
//回到本页：
to_page(currentPage);
}
});
}else{
//后悔或者误操作了，就不错处理
}
});
//发送ajax请求，获取指定id的员工数据
function getEmp(id){
$.ajax({
url:"${APP_PATH}/emp/"+id,
type:"GET",
success:function (result){
var empData = result.extend.emp;
$("#empName_update_static").text(empData.empName);
$("#email_update_input").val(empData.email);
$("#empUpdateModal input[name=gender]").val([empData.gender]);
$("#empUpdateModal select").val([empData.dId]);
}
});
}
//绑定修改模态框的更新按钮
$("#emp_update_btn").click(function (){
//1、验证邮箱信息是否合法
var email = $("#email_update_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){//失败
// alert("邮箱校验格式不正确")
show_validate_msg("#email_update_input","error","邮箱校验格式不正确");
return false;
}else{//成功
show_validate_msg("#email_update_input","success","");
}
//2、发送ajax请求，对用户新填写的用户数据信息提交到数据库里面去。
$.ajax({
url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
type:"PUT",
data:$("#empUpdateModalForm").serialize(),
success:function (result){
// alert(result.msg);
//1、关闭模态框
$("#empUpdateModal").modal("hide");
//2、回到页面显示被修改之后的数据。
to_page(currentPage);
},
error:function (result){
alert(result.msg);
}
});
});
//绑定全选或者全不选按钮的点击事件：
$("#check_all").click(function (){
//拿到标题列里面的选中状态
var isChecked = $(this).prop("checked");
//让下面的五个多选框的选中状态和标题列保持一致。
$(".check_item").prop("checked",isChecked);
});
//绑定下面五个里面的每一个单击事件
$(document).on("click",".check_item",function (){
//拿到当前五个里面选中了多少个：
var checkedNum = $(".check_item:checked").length;
//判断当前选中的个数是否等于所有的多选框个数
var isEqual = checkedNum == $(".check_item").length;
//所以标题列的选中状态和isEqual保持一致。
$("#check_all").prop("checked",isEqual);
});
//给批量删除按钮绑定单击事件：
$("#emp_delete_all_btn").click(function (){
var empNames = "" ;
var empIds = "" ;
if($(".check_item:checked").length > 0) {
$.each($(".check_item:checked"), function () {
//this对象代表当前选中的多选框。
var currentEmpName = $(this).parents("tr").find("td:eq(2)").text();
var currentEmpId = $(this).parents("tr").find("td:eq(1)").text();
empNames += currentEmpName + ",";
empIds += currentEmpId + "-";
});
//去除empNames后面的逗号。采用字符串的substring方法
empNames = empNames.substring(0,empNames.length-1);
empIds = empIds.substring(0,empIds.length-1);
if (confirm("确认批量删除【" + empNames + "】吗？")) {
//如果点击了确认就发送ajax请求，直接批量删除DB中的数据，并回到当前页。
$.ajax({
url:"${APP_PATH}/emp/"+empIds,
type:"DELETE",
success:function (result){
alert(result.msg);
//跳转到当前页面
to_page(currentPage);
}
});
}
}else{
alert("没有选择要删除的元素！");
}
});
</script>
</body>
</html>
4430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
