7 删除员工信息
一 单个删除
操作步骤:
1 点击每行对应的删除按钮,会弹出确定删除【XXX】信息的提示框;
2 发送Ajax请求到后台去处理,删除员工信息;
3 提示删除成功,返回当前页。
后台代码:
/** * 删除单个员工信息 * @param empId * @return */ @RequestMapping(value ="emp/deleteEmp/{empId}", method = {RequestMethod.DELETE}) @ResponseBody public Msg deleteEmp(@PathVariable("empId") Integer empId){ int result = 0; if (empId > 0){ result = employeeService.deleteEmployeeByEmpId(empId); } if (result <= 0){ return Msg.fail().add("delete-error", "删除异常"); } return Msg.success(); }
前端:
/**
* 单个删除
* 1 点击删除按钮,弹出是否确认删除[XXXX]的对话框
* 2 获取要删除的id,发送Ajax请求到后台进行删除
*/
$(document).on("click", ".delete_btn", function () {
var empName = $(this).parents("tr").find("td:eq(1)").text();
var empId = $(this).attr("delete-id");
if (confirm("确认删除【"+ empName + "】的信息吗?")){
$.ajax({
url :"${APP_PATH}/emp/deleteEmp/ " + empId,
type : "DELETE",
success : function (result) {
if (result.code == 100){
alert("删除成功!");
//回到本页面
to_page(currentPage);
} else {
alert("删除异常");
}
}
});
}
});
二、批量删除
后台代码:
1 EmployeeService.java
/** * 批量删除 * @param idList * @return */ public int deleteEmpBatch(List<Integer> idList) { EmployeeExample example = new EmployeeExample(); Criteria criteria = example.createCriteria(); //delete from xxx where emp_id in(1,2,3) criteria.andEmpIdIn(idList); return employeeMapper.deleteByExample(example); }
2 EmployeeController.java:
/** * 删除单个员工信息/批量删除 * @param * @return */ @RequestMapping(value ="emp/deleteEmp/{ids}", method = {RequestMethod.DELETE}) @ResponseBody public Msg deleteEmp(@PathVariable("ids") String ids){ //含有"-",表示批量删除 if (ids.contains("-")){ List<Integer> idList = new ArrayList<>(); String[] splitIds = ids.split("-"); for (String id : splitIds){ idList.add(Integer.parseInt(id)); } int result = employeeService.deleteEmpBatch(idList); if (result < 0){ return Msg.fail().add("delete-error", "批量删除异常"); } }else { Integer empId = Integer.parseInt(ids); int result = 0; if (empId > 0){ result = employeeService.deleteEmployeeByEmpId(empId); } if (result < 0){ return Msg.fail().add("delete-error", "单个删除异常"); } } return Msg.success(); }
前端:
1 全选/全不选操作:
1) 点击全选,则下面所有选项被选中
2) 再次点击全选,则下面所有选项被取消
3) 若当前页所有选项被选中,则全选框也自动被选中
4) 若当前页所有选项没有全被选中,则全选框也被取消
/**
* 全选全部选:
* 1 点击全选,则下面所有选项被选中
* 2 再次点击全选,则下面所有选项被取消
* 3 若当前页所有选项被选中,则全选框也自动被选中
* 4 若当前页所有选项没有全被选中,则全选框也被取消
*/
// 点击全选
$("#check_all").click(function () {
alert($(this).prop("checked"));
//prop:为DOM原生属性赋值
//attr: 为自定义属性赋值
//获取全选/全不选操作属性。全选:true;全部选:false
var flag = $(this).prop("checked");
//flag为true的时候即为全选,下面每行都点击上;反之全不选
$(".check_item").prop("checked", flag);
});
//单个点击
$(document).on("click", ".check_item", function () {
//判断当前选择的元素是否是整个元素的个数,是即为全选
var flag = $(".check_item:checked").length == $(".check_item").length;
$("#check_all").prop("checked", flag);
});
2 批量删除:
1) 点击批量删除,弹出是否删除【XXX,XXX,XXX】的提示信息
2) 获取选择要删除的id
3) 发送Ajax请求到后台去处理
4) 提示删除成功,返回当前页面
/**
* 批量删除
* 1 点击批量删除,弹出是否删除【XXX,XXX,XXX】的提示信息
* 2 获取选择要删除的id
* 3 发送Ajax请求到后台去处理
* 4 提示删除成功,返回当前页面
*/
$("#emp_deleteAll_btn").click(function(){
var del_empNames = "";
var del_empIds = "";
$.each($(".check_item:checked"), function () {
del_empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
del_empIds += $(this).parents("tr").find("td:eq(1)").text()+"-";
});
//去除del_empNames,del_empIds
del_empNames = del_empNames.substring(0, del_empNames.length - 1);
del_empIds = del_empIds.substring(0, del_empIds.length - 1);
if(confirm("确定要删除【" + del_empNames + "】的信息吗?")){
$.ajax({
url : "${APP_PATH}/emp/deleteEmp/" + del_empIds,
type : "DELETE",
success : function (result) {
if (result.code == 100){
alert("批量删除成功");
to_page(currentPage);
} else{
alert("批量删除异常");
}
}
});
}
});
效果如图:
所有代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>员工信息显示</title> <% pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script> <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <!--修改员工Modal框--> <div class="modal fade" id="Emp_Update_Modal" tabindex="-1" role="dialog" aria-labelledby="emp_update_modal_label"> <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="emp_update_modal_label">修改员工</h4> </div> <div class="modal-body"> <form class="form-horizontal" id="emp_update_form"> <div class="form-group"> <label for="empName" 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 for="email" class="col-sm-2 control-label">email:</label> <div class="col-sm-10"> <input type="email" class="form-control" name="eamil" id="email_update" placeholder="email"> <span id="edit_helpBlock2" class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">gender:</label> <div class="col-sm-offset-2 col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="gender1__update_input" checked="checked" value="M"> 男 </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="deptName_select_update"> </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> <!--新增员工Model框--> <div class="modal fade" id="Emp_Add_Modal" tabindex="-1" role="dialog" aria-labelledby="emp_add_modal_label"> <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="emp_add_modal_label">新增员工</h4> </div> <div class="modal-body"> <form class="form-horizontal" id="emp_add_form"> <div class="form-group"> <label for="empName" class="col-sm-2 control-label">empName:</label> <div class="col-sm-10"> <input type="text" class="form-control" name="empName" id="empName" placeholder="empName"> <span id="helpBlock11" class="help-block"></span> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">email:</label> <div class="col-sm-10"> <input type="email" class="form-control" name="eamil" id="email" placeholder="email"> <span id="helpBlock22" class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">gender:</label> <div class="col-sm-offset-2 col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="gender1_input" checked="checked" value="M"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2_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="deptName_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-4"> <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_btn" data-toggle="modal" data-target="#Emp_Add_Modal">新增</button> <button class="btn btn-danger" id="emp_deleteAll_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>Option</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <!-- 分页信息 --> <div class="row"> <div class="col-md-6" id="page_info"> </div> <div class="col-md-6" id="nav_pagination_info"> </div> </div> </div> <script type="text/javascript"> //全局变量,保存总记录数和当前页数 var totalRecord, currentPage; $(function(){ //默认去首页 to_page(1); }) function to_page(pageNo) { $.ajax({ url:"${APP_PATH}/emp/list2", data:"pageNo="+pageNo, type:"GET", success:function (result) { console.log(result); //1、解析并显示员工数据 build_emps_table(result); //2、解析并显示分页信息 build_page_info(result); //3、解析显示分页条数据 build_page_nav(result); } }); } function build_emps_table(result) { //清空表格 $("#emps_table tbody").empty(); var emps = result.extendInfo.pageInfo.list; $.each(emps, function (index, item) { var checkBoxItemTd = $("<td></td>").append("<input type='checkbox' class='check_item'>"); var empIdTd = $("<td></td>").append(item.empId); var empNameTd = $("<td></td>").append(item.empName); var emailTd = $("<td></td>").append(item.eamil); var genderId = $("<td></td>").append(item.gender=="M"?"男":"女"); var deptNameTd = $("<td></td>").append(item.department.deptName); var editBtn = $("<button></button>").addClass("btn btn-info btn-sm edit_btn") .append( $("<span></span>").addClass("glyphicon glyphicon-pencil") .append("编辑")); //修改的时候 ,获取点击的员工的id editBtn.attr("edit-id", item.empId); var deleteBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn") .append( $("<span></span>").addClass("glyphicon glyphicon-trash") .append("删除")); //删除的时候 ,获取点击的员工的id deleteBtn.attr("delete-id", item.empId); $("<tr></tr>").append(checkBoxItemTd) .append(empIdTd) .append(empNameTd) .append(emailTd) .append(genderId) .append(deptNameTd) .append(editBtn) .append(" ") .append(deleteBtn) .appendTo("#emps_table tbody"); }) } function build_page_info(result) { //清空 $("#page_info").empty(); var pageInfo = result.extendInfo.pageInfo; var curPage = pageInfo.pageNum; var pages = pageInfo.pages; var totalPages = pageInfo.total; $("#page_info").append(" 当前第"+curPage+"页,") .append("共有"+ pages +"页,") .append("总共"+ totalPages + "条记录数"); totalRecord = totalPages; currentPage = curPage; } function build_page_nav(result) { //清空 $("#nav_pagination_info").empty(); var nav = $("<nav></nav>"); var ul = $("<tr></tr>").addClass("pagination"); //首页、上一页 var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#")); var prePageLi = $("<li></li>").append($("<a></a>").append("«")); //首页禁止点击,并且不显示数据 if(result.extendInfo.pageInfo.hasPreviousPage == false){ firstPageLi.addClass("disabled"); prePageLi.addClass("disabled"); }else { //首页,上一页添加事件,显示对应页码数据 firstPageLi.click(function () { to_page(1) }); prePageLi.click(function () { to_page(result.extendInfo.pageInfo.pageNum-1); }); } //末页、下一页 var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#")); var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); //末页禁止点击,并且不显示数据 if(result.extendInfo.pageInfo.hasNextPage == false){ lastPageLi.addClass("disabled"); nextPageLi.addClass("disabled"); }else{ //末页,下一页添加事件,显示对应页码数据 lastPageLi.click(function () { to_page(result.extendInfo.pageInfo.pages); }); nextPageLi.click(function () { to_page(result.extendInfo.pageInfo.pageNum + 1); }); } ul.append(firstPageLi).append(prePageLi); //1,2,3,4,5页码显示 $.each(result.extendInfo.pageInfo.navigatepageNums, function (index, item) { var numLi = $("<li></li>").append($("<a></a>").append(item)); if(result.extendInfo.pageInfo.pageNum == item){ numLi.addClass("active"); } //点击页码跳转到对应页码并显示对应数据 numLi.click(function(){ to_page(item); }); ul.append(numLi); }) ul.append(nextPageLi).append(lastPageLi); nav.append(ul); $("#nav_pagination_info").append(nav); } /** * 清除样式 */ function reset_form(ele){ $(ele)[0].reset(); //清空表单样式 $(ele).find("*").removeClass("has-error has-success"); $(ele).find(".help-block").text(""); } /** * 点击新增按钮,填写新增员工信息 * 新增之前需要清除样式 */ $("#emp_add_btn").click(function () { //0 清除表单样式 reset_form("#Emp_Add_Modal form"); //1 获取部门信息,并显示在下拉框中 getDeptName("#deptName_select"); //2 显示模态框 $('#Emp_Add_Modal').modal({ backdrop:static, keyboard:true }); }); function getDeptName(ele) { $(ele).empty(); $.ajax({ url: "${APP_PATH}/dept/deptList", type: "GET", success: function (result) { console.log(result); //将信息显示到下拉列表中 $.each(result.extendInfo.depts,function () { var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId); optionEle.appendTo(ele); }); } }); } /** * 点击保存按钮,保存员工信息 */ $("#emp_save_btn").click(function () { //1 先校验 !validate_add_form()==true的时候说明校验有问题 if(!validate_add_form()){ return false; } //2 看用户名是否重复 if($("#empName").attr("empName_validate") == "error"){ return false; } //3 发送AJAX请求保存员工信息 $.ajax({ url:"${APP_PATH}/emp/save", type: "POST", data:$("#emp_add_form").serialize(), success: function (result) { if(result.code == 100){ alert("保存成功"); //1 关闭模态框 $("#Emp_Add_Modal").modal("hide"); //2、来到最后一页,显示刚才保存的数据 //发送ajax请求显示最后一页数据即可 to_page(totalRecord); }else { console.log(result); //显示错误信息 !=undifned 即不为空,表示有错 if (undefined != result.extendInfo.errorFields.eamil){ show_validate_msg("#email", "error", result.extendInfo.errorFields.eamil) } if (undefined != result.extendInfo.errorFields.empName){ show_validate_msg("#empName", "error", result.extendInfo.errorFields.empName); } } } }); }); /** * change:检测到输入框有改变后就会去验证用户名是否重复: */ //校验用户名是否重复 $("#empName").change(function () { var empName = this.value; $.ajax({ url: "${APP_PATH}/emp/checkUser", data:"empName="+ empName, type:"POST", success: function (result) { if(result.code == 100){ show_validate_msg("#empName", "success", "用户名可用"); $("#emp_save_btn").attr("empName_validate", "success"); }else { //显示后台验证的错误信息 show_validate_msg("#empName", "error", result.extendInfo.validate_error_msg); $("#emp_save_btn").attr("empName_validate", "error"); } } }); }); function show_validate_msg(ele, status, msg) { //清除当前元素的校验状态 $(ele).parent().removeClass("has-error has-success"); $(ele).next("span").text(""); if("success"==status){ $(ele).parent().addClass("has-success"); $(ele).next("span").text(msg); }else if("error"==status){ $(ele).parent().addClass("has-error"); $(ele).next("span").text(msg); } } /** * 检验表格中输入的信息格式是否正确 */ function validate_add_form(){ //验证用户名 var empName = $("#empName").val(); var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/; if (!regName.test(empName)){ // alert("用户名可以是2-5位中文或者6-16位英文和数字的组合"); /* $("#empName").parent().addClass("has-error"); $("#empName").next("span").text("用户名可以是2-5位中文或者6-16位英文和数字的组合");*/ show_validate_msg("#empName", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合"); return false; }else{ show_validate_msg("#empName", "success", ""); /* $("#empName").parent().addClass("has-success");*/ } //验证邮箱 var email = $("#email").val(); var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if(!regEmail.test(email)){ //alert("邮箱格式不正确!"); /* $("#email").parent().addClass("has-error"); $("#email").next("span").text("邮箱格式不正确!");*/ show_validate_msg("#email", "error", "邮箱格式不正确!"); return false; }else{ /* $("#email").parent().addClass("has-success");*/ show_validate_msg("#email", "success", ""); } return true; } /** * ======================================================================================================================== * ==========================修改=================================== *======================================================================================================================== */ /** * 修改第一步:弹出修改模态框 * 1 点击编辑,弹出模态框 * 2 查询部门信息,显示在部门下拉框中 * 3 查询员工信息,进行回显,员工姓名只显示不允许修改 * 4 将员工id赋值给 更新按钮 */ $(document).on("click", ".edit_btn", function () { //0 清除表单样式 reset_form("#Emp_Update_Modal form"); //1 查出部门信息,进行回显 getDeptName("#deptName_select_update"); //2 查出员工信息,进行回显 getEmp($(this).attr("edit-id")); //3 把员工的 id 传给修改Modal框的更新按钮,获取id后点击更新按钮发送Ajax请求 $("#emp_update_btn").attr("edit-id", $(this).attr("edit-id")); $("#Emp_Update_Modal").modal({ backdrop:"static", keyboard : true }); }); /** * 修改第二步:保存修改信息 * 1 点击更新按钮,进行邮箱格式验证 * 2 将更改的表格内容序列化,发送Ajax请求,存入数据库; * 3 关闭模态框 * 4 回到本页面 */ $("#emp_update_btn").click(function () { var email = $("#email_update").val(); var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if(!regEmail.test(email)){ show_validate_msg("#email_update", "error", "邮箱格式不正确!"); return false; }else{ show_validate_msg("#email_update", "success", ""); } $.ajax({ url: "${APP_PATH}/emp/updateEmp/"+ $(this).attr("edit-id"), type : "PUT", data : $("#emp_update_form").serialize(), success : function (result) { if (result.code == 100){ alert("更新成功"); //1 关闭模态框 $("#Emp_Update_Modal").modal("hide"); //2 回到本页面 to_page(currentPage); } else{ alert("更新失败"); } } }); }); /** * 修改:获取员工信息 */ function getEmp(empId){ $.ajax({ url: "${APP_PATH}/emp/getEmp/"+empId, type : "GET", success: function (result) { var empData = result.extendInfo.employee; $("#empName_update_static").text(empData.empName); $("#email_update").val(empData.eamil); $("#Emp_Update_Modal input[name=gender]").val([empData.gender]); $("#deptName_select_update").val(empData.dId); } }); } /** * ======================================================================================================================== * =========================删除================================== *======================================================================================================================== */ /** * 单个删除 * 1 点击删除按钮,弹出是否确认删除[XXXX]的对话框 * 2 获取要删除的id,发送Ajax请求到后台进行删除 */ $(document).on("click", ".delete_btn", function () { var empName = $(this).parents("tr").find("td:eq(2)").text(); var empId = $(this).attr("delete-id"); if (confirm("确认删除【"+ empName + "】的信息吗?")){ $.ajax({ url :"${APP_PATH}/emp/deleteEmp/" + empId, type : "DELETE", success : function (result) { if (result.code == 100){ alert("删除成功!"); //回到本页面 to_page(currentPage); } else { alert("删除异常"); } } }); } }); /** * 批量删除 * 1 点击批量删除,弹出是否删除【XXX,XXX,XXX】的提示信息 * 2 获取选择要删除的id * 3 发送Ajax请求到后台去处理 * 4 提示删除成功,返回当前页面 */ $("#emp_deleteAll_btn").click(function(){ var del_empNames = ""; var del_empIds = ""; $.each($(".check_item:checked"), function () { del_empNames += $(this).parents("tr").find("td:eq(2)").text()+","; del_empIds += $(this).parents("tr").find("td:eq(1)").text()+"-"; }); //去除del_empNames,del_empIds del_empNames = del_empNames.substring(0, del_empNames.length - 1); del_empIds = del_empIds.substring(0, del_empIds.length - 1); if(confirm("确定要删除【" + del_empNames + "】的信息吗?")){ $.ajax({ url : "${APP_PATH}/emp/deleteEmp/" + del_empIds, type : "DELETE", success : function (result) { if (result.code == 100){ alert("批量删除成功"); to_page(currentPage); } else{ alert("批量删除异常"); } } }); } }); /** * 全选全部选: * 1 点击全选,则下面所有选项被选中 * 2 再次点击全选,则下面所有选项被取消 * 3 若当前页所有选项被选中,则全选框也自动被选中 * 4 若当前页所有选项没有全被选中,则全选框也被取消 */ // 点击全选 $("#check_all").click(function () { alert($(this).prop("checked")); //prop:为DOM原生属性赋值 //attr: 为自定义属性赋值 //获取全选/全不选操作属性。全选:true;全部选:false var flag = $(this).prop("checked"); //flag为true的时候即为全选,下面每行都点击上;反之全不选 $(".check_item").prop("checked", flag); }); //单个点击 $(document).on("click", ".check_item", function () { //判断当前选择的元素是否是整个元素的个数,是即为全选 var flag = $(".check_item:checked").length == $(".check_item").length; $("#check_all").prop("checked", flag); }); </script> </body> </html>