SSM-CRUD入门项目——删除

删除

　　分析

　　　　可以进行单个删除，直接点击每条记录后的删除按钮

　　　　批量删除，通过勾选checkbox框进行选择删除

　　单个删除：

　　　　通过发送DELETE请求的URL：/emp/{id}

　　这次我们先从controller做起，添加相关的方法（注意@PathVarivale一定不能省略！！）

package cn.crud.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.validation.Valid;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

import cn.crud.bean.Employee;
import cn.crud.bean.Msg;
import cn.crud.service.EmpService;

/**
 * 处理员工的CRUD请求
 * @author Administrator
 *
 */
@Controller
public class EmpController {
    
    @Autowired
    private EmpService empService;
    
    /**
     * 按照ID单个删除的方法
     * 注意这是个RESTful风格的DELETE请求
     * @return
     */
    @RequestMapping(value="/deleteEmp/{id}",method=RequestMethod.DELETE)
    @ResponseBody
    public Msg deleteEmpByID(@PathVariable("id") Integer id){
        //System.out.println(id);
        //调用sevice进行删除处理
        empService.deteleEmp(id);
        return Msg.success();
    }
    /**
     * 保存员工的ajax请求的方法
     * 这里我们引入RESTful风格的PUT请求
     *可以发送时由于我们之前有RESTful风格的配置
     * 此处必须使得占位符的名称与bean的属性名称一致
     * 如果直接发送ajax的PUT请求，会造成除了路径带过来的id，其余都是Null，造成请求对象封装不上
     * SQL就会变成：update table where id = ? 的形式，形成语法错误
     *     而造成这种错误的原因就是
     *             tomcat把请求中的数据封装在一个map中
     *             而springMVC只是调用request.getParameter()进行取值
     *             我们可以猜测直接拿request原生方法也是无法取值的！
     *     这里我们得出结论：
     *         PUT请求不能直接发！tomcat不会直接封装，查看相关源码分析会发现默认只封装POST！
     *         springMVC针对这个情况也有对应的解决方案，配置一个过滤器：HttpPutFormContentFilter
     * @return
     */
    @RequestMapping(value="/updateEmp/{empId}",method=RequestMethod.PUT)
    @ResponseBody
    public Msg updateEmp(Employee employee){
        //System.out.println(employee);
        //调用service完成逻辑
        empService.updateEmp(employee);
        return Msg.success();
    }
    
    /**
     * 处理得到员工信息ajax请求的方法
     * 统一将返回信息封装在Msg中
     * !这里开始使用RESTful风格的url
     * @PathVariable("id")当名称相同时是可以省略的
     *                     【更新】：无法省略！
     * @return
     */
    @RequestMapping(value="/getEmp/{id}",method=RequestMethod.GET)
    @ResponseBody
    public Msg getEmp(@PathVariable("id") Integer id){
        //System.out.println("controller层获取的ID:"+id);
        //调用service完成操作
        Employee employee = empService.getEmp(id);
        //System.out.println(employee);
        //将serivce返回的对象返回给页面
        return Msg.success().add("emp", employee);
    }
    
    /**
     * 校验用户名是否重复，是否可用的方法
     * @return 返回的是我们包装的对象
     */
    @RequestMapping("/vadEmpName")
    @ResponseBody
    public Msg vadEmpName(@RequestParam("empName") String empName){
        //在判断是否重复之前，先进行格式是否正确的校验
        //校验的正则表达式（可以搜索常用正则）
        //特别注意这里的正则和js的正则不一样，加 / 包裹的是js的写法
        String regName = "(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5}$)";
        boolean b = empName.matches(regName);
        if(!b){
            return Msg.fail().add("vadFailMeg", "用户名格式错误！");
        }
        //后端用户名重复性校验
        boolean isRepet = empService.vadEmpName(empName);
        if(isRepet){
            return Msg.success();
        }else{
            return Msg.fail().add("vadFailMeg", "用户名已被占用！");
        }
        
    }
    
    /**
     * 处理添加员工的ajax请求的方法
     * 　1.要支持JSR303后端校验，需要导入hibernate-validate的包
     * 2.在bean的属性中添加相关的注解
     * 3.在方法入参添加相关的注解
     *     @Valid后跟需要校验的对象，BindingResult时校验的结果
     * @return
     */
    @RequestMapping(value="/emp",method=RequestMethod.POST)
    @ResponseBody
    public Msg saveEmp(@Valid Employee employee,BindingResult result){
        if(result.hasErrors()){//若存在错误，校验失败
            //保存错误信息的map,便于封装
            Map<String,Object> errors = new HashMap<String,Object>();
            //返回错误信息
            List<FieldError> fieldErrors = result.getFieldErrors();
            for (FieldError fieldError : fieldErrors) {//遍历错误信息
                //错误的字段名：
                System.out.println("错误的字段名："+fieldError.getField());
                //错误的提示信息
                System.out.println("错误信息："+fieldError.getDefaultMessage());
                //封装错误信息
                errors.put(fieldError.getField(), fieldError.getDefaultMessage());
            }
            //最后封装如Msg的map中进行返回
            return Msg.fail().add("fieldErrors", errors);
        }else{
            empService.saveEmp(employee);
            return Msg.success();
        }
        
    }
    
    /**
     * 分页信息的AJAX请求
     * @ResponseBody可以将返回的对象转为JSON字符串
     * 此注解需要引入jackson的包（以及注解驱动的配置等，这里已经进行配置）
     * 将返回信息包装在msg里
     */
    @RequestMapping("/emps")
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1") Integer pn, Model model){
        //改造为一个分页查询
        //在查询之前传入分页参数：起始页和每页记录数
        PageHelper.startPage(pn, 5);
        //后面紧跟的查询就是分页查询
        List<Employee> empList = empService.getAll();
        //用PageInfo对结果进行包装，只需要将PageInfo交给页面即可，这里面封装了详细的信息,第二个参数为需要连续显示的记录数
        PageInfo page = new PageInfo(empList,5);
        //直接将pageInfo对象进行返回
        //将pageInfo放在msg里进行返回，链式操作返回对象本身
        return Msg.success().add("pageInfo", page);
    }
    
    /**
     * 分页查询员工数据
     */
    //@RequestMapping("/emps")
    public String getEmps(@RequestParam(value="pn",defaultValue="1") Integer pn, Model model){
        //改造为一个分页查询
        //在查询之前传入分页参数：起始页和每页记录数
        PageHelper.startPage(pn, 5);
        //后面紧跟的查询就是分页查询
        List<Employee> empList = empService.getAll();
        //用PageInfo对结果进行包装，只需要将PageInfo交给页面即可，这里面封装了详细的信息,第二个参数为需要连续显示的记录数
        PageInfo page = new PageInfo(empList,5);
        model.addAttribute("pageInfo", page);
        return "list";
    }
}

　　调用的service比较简单粗暴，直接调用DAO：

/**
     * 按照ID删除员工
     * @param id
     */
    public void deteleEmp(Integer id) {
        //调用dao删除即可
        employeeMapper.deleteByPrimaryKey(id);
        
    }

　　页面和之前更新有类似之处，也是保存ID，进行ajax请求操作：

<%@ 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("path",request.getContextPath());
%>
<!-- 推荐以 / 开始的相对路径（以服务器的根路径为相对路径） ,这里的${path}是前带 / 后不带 / 的路径-->
<link href="${path}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <!-- 先引入jQuery，再引入js -->
<script type="text/javascript" src="${path}/static/bootstrap/js/jquery.min.js"> </script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 员工修改模态框 -->
    <div class="modal fade" id="editEmpModal" 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"><span>&times;</span></button>
            <h4 class="modal-title">员工修改</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <!-- 显示员工姓名的静态组件 -->
              <div class="form-group">
                <label for="input_empName" class="col-sm-2 control-label">empName</label>
                <div class="col-sm-10">
                 <p class="form-control-static" id="empName_static"></p>
                </div>
              </div>
              <!-- 输入员工邮箱 -->
              <div class="form-group">
                <label for="input_email" class="col-sm-2 control-label">email</label>
                <div class="col-sm-10">
                  <input type="text" name="email" class="form-control" id="input_update_email" placeholder="email">
                  <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_update_input" 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" style="120px">    
                    <!-- 部门名称是变动的，这里保存员工是只保存ID的形式 -->
                    <select class="form-control" name="dId">
                        
                    </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_updateBtn">更新</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 员工新增模态框 -->
    <div class="modal fade" id="addEmpModal" 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"><span>&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">添加员工</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <!-- 输入员工姓名 -->
              <div class="form-group">
                <label for="input_empName" class="col-sm-2 control-label">empName</label>
                <div class="col-sm-10">
                  <input type="text" name="empName" class="form-control" id="input_empName" placeholder="empName">
                  <span class="help-block"></span>
                </div>
              </div>
              <!-- 输入员工邮箱 -->
              <div class="form-group">
                <label for="input_email" class="col-sm-2 control-label">email</label>
                <div class="col-sm-10">
                  <input type="text" name="email" class="form-control" id="input_email" placeholder="email">
                  <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" style="120px">    
                    <!-- 部门名称是变动的，这里保存员工是只保存ID的形式 -->
                    <select class="form-control" name="dId">
                        
                    </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_saveBtn">保存</button>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
        <!-- 分为四大行 -->
        <!-- 标题 -->
        <div class="row">
             <div class="col-md-12">
                <font size="20">SSM-CRUD</font>
             </div>
        </div>
        <!-- 按钮 -->
        <div class="row">
            <!-- 偏移4列 -->
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary" id="addBtn_modal">新增</button>
                <button type="button" class="btn btn-danger ">删除</button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>empName</th>
                            <th>empEmail</th>
                            <th>gender</th>
                            <th>deptName</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 分页信息 -->
        <div class="row">
            <!-- 分页文字信息，其中分页信息都封装在pageInfo中 -->
            <div class="col-md-6" id="page_info">
                
            </div>
            <!-- 分页条 -->
            <div class="col-md-6" id="page_nav">
                
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //全局总记录数，用于查最后一页
        var golbalTotalCount,golbalCurrentPage;
        //页面加载完成后直接发送ajax请求，取得分页数据
        $(function(){
            //加载完页面就通过这个函数发ajax请求
            toPage(1);
        });
        //跳转到某页的函数
        function toPage(pn){
            $.ajax({
                //请求方式
                type : "GET", 
                //请求url
                url : "${path}/emps",
                //请求要带的数据
                data :"pn="+pn,
                //请求成功的回调函数
                success : function(result) {
                    //1.解析JSON返回员工数据
                    build_emps_table(result);
                    //2.解析生成分页信息(分页条与分页导航)
                    build_pages_info(result);
                    build_pages_nav(result);
                }
            });
        }
        //解析员工数据
        function build_emps_table(result){
            //清空表格数据
            $("#emps_table tbody").empty();
            //员工数据
            var emps = result.map.pageInfo.list;
            //使用jQuery遍历数组，遍历的是取出来的json数组，可以通过开发工具查看JSON结构
            $.each(emps,function(idx,item){
                //使用jQuery生成各列
                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);
                //添加操作按钮，通过jQuery的一些操作（例如CSS的追加CSS操作），完成按钮的构建
                var editBtn = $("<button></button>").addClass("btn btn-info btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("编辑");
                //为编辑按钮添加自定义属性，保存员工的ID
                editBtn.attr("editId",item.empId);
                var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm del_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                .append("删除");
                //为删除按钮添加自定义属性，保存要删除的员工ID
                delBtn.attr("delId",item.empId);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                //链式操作完成列的添加（链式操作由于jQuery返回的是原元素）
                $("<tr></tr>").append(empIdTd)
                    .append(empNameTd)
                    .append(emailTd)
                    .append(genderTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo($("#emps_table tbody"));
            });
        }
        //生成分页信息
        function build_pages_info(result){
            //清空分页数据
            $("#page_info").empty();
            //当前页
            var currentPage = result.map.pageInfo.pageNum;
            //总页数
            var totalPage = result.map.pageInfo.pages;
            //总记录数
            var totalCount = result.map.pageInfo.total;
            //给全局记录数赋值
            golbalTotalCount = result.map.pageInfo.total;
            //给当前页赋值，完成当前页信息的保存
            golbalCurrentPage = currentPage;
            $("#page_info").append("当前第："+currentPage+"页，"+"总共："+totalPage+"页，"+"总共："+totalCount+"条记录");
        }
        //生成分页导航信息
        function build_pages_nav(result){
            //清空分页导航信息
            $("#page_nav").empty();
            //导航条外层的Ul
            var navUl = $("<ul></ul>").addClass("pagination");
            //首页
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
            //前一页
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //判断是否有首页
            if(result.map.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else{
                //添加首页和前一页翻页的单机事件
                firstPageLi.click(function(){
                    toPage(1);
                });
                prePageLi.click(function(){
                    toPage(result.map.pageInfo.pageNum-1);
                });
            }
            
            //后一页
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            //末页
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
            //判断是否有末页
            if(result.map.pageInfo.hasNextPage == false){
                lastPageLi.addClass("disabled");
                nextPageLi.addClass("disabled");
            }else{
                //添加末页和后一页翻页的单机事件
                lastPageLi.click(function(){
                    toPage(result.map.pageInfo.pages);
                });
                nextPageLi.click(function(){
                    toPage(result.map.pageInfo.pageNum+1);
                });
            }
            
            //添加到ul
            navUl.append(firstPageLi).append(prePageLi);
            
            //遍历页码数
            $.each(result.map.pageInfo.navigatepageNums,function(idx,item){
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                //如果当前页为正在遍历的页，则高亮显示，采用增加类的方法完成
                if(result.map.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                //给每个页码添加单击绑定事件
                numLi.click(function(){
                    toPage(item);
                });
                navUl.append(numLi);
            });
            //li加入ul，ul加入nav
            navUl.append(nextPageLi).append(lastPageLi);
            var navEle = $("<nav></nav>").append(navUl);
            $("#page_nav").append(navEle);
        }
        //清空表单样式及内容
        function reset_form(ele){
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }
        //增加员工的事件，弹出员工模态框
        $("#addBtn_modal").click(function(){
            //重置表单：
            reset_form("#addEmpModal form");
            //发送ajax请求查询部门信息
            getDepts("#addEmpModal select");
            //弹出模态框
            $('#addEmpModal').modal({
                backdrop:false
            });
        });
        //得到部门信息的函数
        function getDepts(ele){
            //先清空原来下拉框的值：
            $(ele).empty();
            $.ajax({
                //请求方式
                type : "GET", 
                //请求url
                url : "${path}/depts",
                //请求要带的数据，这里无需带数据
                //请求成功的回调函数
                success : function(result) {
                    $.each(result.map.deptList,function(){
                        //这里换用不传参的方式，采用this引用正在遍历的对象
                        var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                        optionEle.appendTo(ele);
                    });
                }
            });
        }
        //添加表单数据的前段校验
        function validate_add_form(){
            //1.获取需要校验的值
            //2.使用jQuery正则(api中常用正则)进行校验（校验插件的使用待更新）
            var empNameVal = $("#input_empName").val();
            //校验的正则表达式（可以搜索常用正则）
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5}$)/;
            //开始校验用户名
            if(!regName.test(empNameVal)){
                //alert("用户名只能是6-16位英文数字或2-5位汉字组合！");
                //将提示信息优化，使用bootstrap的样式，给父元素添加相应的类即可
                vilidate_form("#input_empName","error","用户名只能是6-16位英文数字或2-5位汉字组合！");
                //$("#input_empName").parent().addClass("has-error");
                //$("#input_empName").next(".help-block").text("用户名只能是6-16位英文数字或2-5位汉字组合！");
                return false;
            }else{
                vilidate_form("#input_empName","success","用户名正确！");
                //$("#input_empName").parent().addClass("has-success");
                //$("#input_empName").next(".help-block").text("用户名正确！");
            }
            //同理，校验邮箱
            var empEmailVal = $("#input_email").val();
            var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
            //开始校验邮箱
            if(!regEmail.test(empEmailVal)){
                //alert("邮箱不合法！");
                vilidate_form("#input_email","error","邮箱不合法！");
                //$("#input_email").parent().addClass("has-error");
                //$("#input_email").next(".help-block").text("邮箱不合法！");
                return false;
            }else{
                vilidate_form("#input_email","success","邮箱格式正确！");
                //$("#input_email").parent().addClass("has-success");
                //$("#input_email").next(".help-block").text("邮箱格式正确！");
            }
            return true;
        }
        //重新抽取校验函数完成之前重复样式的清除工作
        function vilidate_form(ele,status,msg){
                //清除当前校验状态
                $(ele).parent().removeClass("has-success has-error");
                $(ele).next(".help-block").text("");
            if("success" == status){
                $(ele).parent().addClass("has-success");
                $(ele).next(".help-block").text(msg);
            }else if("error" == status){
                $(ele).parent().addClass("has-error");
                $(ele).next(".help-block").text(msg);
            }
        }
        //为添加员工姓名输入框添加change事件，完成用户名重复的后端校验
        $("#input_empName").change(function(){
            //发送ajax请求，查询用户名是否重复
            var empName = this.value;
            $.ajax({
                //请求方式
                type : "POST", 
                //请求url
                url : "${path}/vadEmpName",
                //请求要带的数据
                data:"empName="+empName,
                //请求成功的回调函数
                success : function(result) {
                    if(result.code == 100){//成功，用户名可用
                        vilidate_form("#input_empName","success","用户名可用！");
                        $("#emp_saveBtn").attr("ajax-vad","success");
                    }else{//失败，用户名不可用
                        vilidate_form("#input_empName","error",result.map.vadFailMeg);
                        $("#emp_saveBtn").attr("ajax-vad","error");
                    }
                }
            });
        });
        //为添加员工的保存按钮绑定单击事件
        $("#emp_saveBtn").click(function(){
            
            //1.5发送ajax请求之前进行用户名是否可用的校验：
            if($(this).attr("ajax-vad")=="error"){
                return false;
            }
            //1.进行表单数据的校验
             if(!validate_add_form()){
                return false;
            } 
            //2.模态框中保存按钮发送ajax请求
            $.ajax({
                //请求方式
                type : "POST", 
                //请求url
                url : "${path}/emp",
                //请求要带的数据，这里是模态框中的值，
                //这里应该采用的是jQuery的序列化表单的方法进行提取表单数据，serialize();
                //表单序列化的数据：$("#addEmpModal form").serialize();
                data:$("#addEmpModal form").serialize(),
                //请求成功的回调函数
                success : function(result) {
                    //alert(result.msg);
                    //添加一个后端校验：
                    if(result.code == 100){//校验成功
                        //1.成功完成模态框则关闭
                        $("#addEmpModal").modal('hide')
                        //2.来到列表最后一页
                        //发送ajax请求，显示最后一页，因为插件做了参数合理化配置，可以配置一个比较大的数字
                        //这样，查到的总是最后一页记录，我们使用全局的总记录数
                        toPage(golbalTotalCount);
                    }else{//校验失败
                        //console.log(result);
                        var emailErrorMsg = result.map.fieldErrors.email;
                        var empNameErrorMsg = result.map.fieldErrors.empName;
                        //有哪个字段的信息就显示哪个
                        if(undefined != emailErrorMsg){
                            //显示邮箱错误信息（之前已经抽象为 方法）
                            vilidate_form("#input_email","error",emailErrorMsg);
                        }
                        if(undefined != empNameErrorMsg){
                            //显示名称错误信息
                            vilidate_form("#input_empName","error",empNameErrorMsg);
                        }
                    }
                    
                }
            });
        });
        //根据id得到员工信息的函数
        function getEmp(id){
            //发送ajax请求查询员工信息
            $.ajax({
                //REST风格的url，直接使用/传参
                url:"${path}/getEmp/"+id,
                type:"GET",
                success:function(result){
                    console.log(result);
                    var empData = result.map.emp;
                    //在页面的指定位置显示相关的值
                    $("#empName_static").text(empData.empName);
                    $("#input_update_email").val(empData.email);
                    //合理使用选择器，选择修改模态框的gender
                    //将单选框的选中项改为val为指定值的选项
                    $("#editEmpModal input[name=gender]").val([empData.gender]);
                    //$("#editEmpModal input[name='genger'][value='"+empData.gender+"']").prop("checked",true);
                    //$("#gender2_update_input").val([empData.gender]);
                    //下拉框同理
                    $("#editEmpModal select").val([empData.dId]);
                }
            });
        }
        /*直接给页面的新增按钮绑定单击事件时不行的，因为按钮是通过发送ajax请求加载数据时
            加载的，而我们的click()是页面加载完时绑定的事件，也就是说按钮事件先于按钮出生的时间
            于是，便出现了问题
        */
        //这里详细的on的用法暂时不展开
        $(document).on("click",".edit_btn",function(){
            //alert("绑定编辑事件成功！");
            //1.查出部门信息，员工信息等
                //这里重新抽取一下得到部门的方法，使其可以得到指定的部门信息，添加到指定的元素
            //发送ajax请求查询部门信息
            getDepts("#editEmpModal select");
            //通过为编辑按钮添加自定义属性保存ID值，可以方便的完成ID值的保存与获取
            getEmp($(this).attr("editId"));
            
            //弹出模态框之前传递ID值给更新按钮
            $("#emp_updateBtn").attr("updateId",$(this).attr("editId"));
            //2.弹出修改模态框
            $('#editEmpModal').modal({
                backdrop:false
            });
        });
        //为更新按钮绑定单击事件，进行更新
        $("#emp_updateBtn").click(function(){
            //由于有邮箱输入，更新之前需要进行邮箱的格式验证
            //直接抽取前面的代码进行校验邮箱
            var empEmailVal = $("#input_update_email").val();
            var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
            //开始校验邮箱
            if(!regEmail.test(empEmailVal)){
                vilidate_form("#input_update_email","error","邮箱不合法！");
                return false;
            }else{
                vilidate_form("#input_update_email","success","邮箱格式正确！");
            }
            //取得要更新的ID
            var udpId = $(this).attr("updateId");
            //邮箱验证通过，发送ajax的PUT请求，完成员工更新
            $.ajax({
                //要根据ID更新，需要取得ID的值，通过同样的自定义属性的方法，将ID传到按钮上
                
                url:"${path}/updateEmp/"+udpId,
                type:"PUT",
                //数据时序列化表单的数据
                data:$("#editEmpModal form").serialize(),
                success:function(result){
                    //alert("处理成功！");
                    //1.关闭模态框框
                    $("#editEmpModal").modal('hide');
                    //2.回到本页面，本页面如何获取呢，我们通过构建分页条时的pageInfo得到本页页码
                        //再像之前保存总记录数一样，保存本页数据到全局变量即可！
                    toPage(golbalCurrentPage);
                }
            });
        });
        //同理，为后来动态生成的删除按钮绑定单击事件，依旧使用on方法
        $(document).on("click",".del_btn",function(){
            //1.弹出确认删除对话框（需要获取员工姓名进行确认）
                //这里下标从0开始
            var empName = $(this).parents("tr").find("td:eq(1)").text();
            var delID = $(this).attr("delId");
            if(confirm("确认删除："+empName+"吗？")){
                //确认胡发送ajax请求进行删除
                $.ajax({
                    url:"${path}/deleteEmp/"+delID,
                    type:"DELETE",
                    //无数据传送
                    success:function(result){
                        //alert(result.msg);
                        //2.回到本页面，本页面如何获取呢，我们通过构建分页条时的pageInfo得到本页页码
                        //再像之前保存总记录数一样，保存本页数据到全局变量即可！
                    toPage(golbalCurrentPage);
                    }
                });
            }
        });
    </script>
</body>
</html>

　　测试暂时不贴，删除成功返回本页即可.

　　批量删除：

　　　　我们可以先把前台页面搭建出来，在动态生成表格的时候生成相关的效果：

<%@ 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("path",request.getContextPath());
%>
<!-- 推荐以 / 开始的相对路径（以服务器的根路径为相对路径） ,这里的${path}是前带 / 后不带 / 的路径-->
<link href="${path}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <!-- 先引入jQuery，再引入js -->
<script type="text/javascript" src="${path}/static/bootstrap/js/jquery.min.js"> </script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 员工修改模态框 -->
    <div class="modal fade" id="editEmpModal" 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"><span>&times;</span></button>
            <h4 class="modal-title">员工修改</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <!-- 显示员工姓名的静态组件 -->
              <div class="form-group">
                <label for="input_empName" class="col-sm-2 control-label">empName</label>
                <div class="col-sm-10">
                 <p class="form-control-static" id="empName_static"></p>
                </div>
              </div>
              <!-- 输入员工邮箱 -->
              <div class="form-group">
                <label for="input_email" class="col-sm-2 control-label">email</label>
                <div class="col-sm-10">
                  <input type="text" name="email" class="form-control" id="input_update_email" placeholder="email">
                  <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_update_input" 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" style="120px">    
                    <!-- 部门名称是变动的，这里保存员工是只保存ID的形式 -->
                    <select class="form-control" name="dId">
                        
                    </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_updateBtn">更新</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 员工新增模态框 -->
    <div class="modal fade" id="addEmpModal" 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"><span>&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">添加员工</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <!-- 输入员工姓名 -->
              <div class="form-group">
                <label for="input_empName" class="col-sm-2 control-label">empName</label>
                <div class="col-sm-10">
                  <input type="text" name="empName" class="form-control" id="input_empName" placeholder="empName">
                  <span class="help-block"></span>
                </div>
              </div>
              <!-- 输入员工邮箱 -->
              <div class="form-group">
                <label for="input_email" class="col-sm-2 control-label">email</label>
                <div class="col-sm-10">
                  <input type="text" name="email" class="form-control" id="input_email" placeholder="email">
                  <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" style="120px">    
                    <!-- 部门名称是变动的，这里保存员工是只保存ID的形式 -->
                    <select class="form-control" name="dId">
                        
                    </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_saveBtn">保存</button>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
        <!-- 分为四大行 -->
        <!-- 标题 -->
        <div class="row">
             <div class="col-md-12">
                <font size="20">SSM-CRUD</font>
             </div>
        </div>
        <!-- 按钮 -->
        <div class="row">
            <!-- 偏移4列 -->
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary" id="addBtn_modal">新增</button>
                <button type="button" class="btn btn-danger ">删除</button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_table">
                    <thead>
                        <tr>
                            <!-- 新增批量删除的checkbox -->
                            <th>
                                <input type="checkbox" id="check_all"/>
                            </th>
                            <th>#</th>
                            <th>empName</th>
                            <th>empEmail</th>
                            <th>gender</th>
                            <th>deptName</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 分页信息 -->
        <div class="row">
            <!-- 分页文字信息，其中分页信息都封装在pageInfo中 -->
            <div class="col-md-6" id="page_info">
                
            </div>
            <!-- 分页条 -->
            <div class="col-md-6" id="page_nav">
                
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //全局总记录数，用于查最后一页
        var golbalTotalCount,golbalCurrentPage;
        //页面加载完成后直接发送ajax请求，取得分页数据
        $(function(){
            //加载完页面就通过这个函数发ajax请求
            toPage(1);
        });
        //跳转到某页的函数
        function toPage(pn){
            $.ajax({
                //请求方式
                type : "GET", 
                //请求url
                url : "${path}/emps",
                //请求要带的数据
                data :"pn="+pn,
                //请求成功的回调函数
                success : function(result) {
                    //1.解析JSON返回员工数据
                    build_emps_table(result);
                    //2.解析生成分页信息(分页条与分页导航)
                    build_pages_info(result);
                    build_pages_nav(result);
                }
            });
        }
        //解析员工数据
        function build_emps_table(result){
            //清空表格数据
            $("#emps_table tbody").empty();
            //员工数据
            var emps = result.map.pageInfo.list;
            //使用jQuery遍历数组，遍历的是取出来的json数组，可以通过开发工具查看JSON结构
            $.each(emps,function(idx,item){
                //增加删除的多选框
                var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                //使用jQuery生成各列
                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);
                //添加操作按钮，通过jQuery的一些操作（例如CSS的追加CSS操作），完成按钮的构建
                var editBtn = $("<button></button>").addClass("btn btn-info btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("编辑");
                //为编辑按钮添加自定义属性，保存员工的ID
                editBtn.attr("editId",item.empId);
                var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm del_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                .append("删除");
                //为删除按钮添加自定义属性，保存要删除的员工ID
                delBtn.attr("delId",item.empId);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                //链式操作完成列的添加（链式操作由于jQuery返回的是原元素）
                $("<tr></tr>").append(checkboxTd)
                    .append(empIdTd)
                    .append(empNameTd)
                    .append(emailTd)
                    .append(genderTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo($("#emps_table tbody"));
            });
        }
        //生成分页信息
        function build_pages_info(result){
            //清空分页数据
            $("#page_info").empty();
            //当前页
            var currentPage = result.map.pageInfo.pageNum;
            //总页数
            var totalPage = result.map.pageInfo.pages;
            //总记录数
            var totalCount = result.map.pageInfo.total;
            //给全局记录数赋值
            golbalTotalCount = result.map.pageInfo.total;
            //给当前页赋值，完成当前页信息的保存
            golbalCurrentPage = currentPage;
            $("#page_info").append("当前第："+currentPage+"页，"+"总共："+totalPage+"页，"+"总共："+totalCount+"条记录");
        }
        //生成分页导航信息
        function build_pages_nav(result){
            //清空分页导航信息
            $("#page_nav").empty();
            //导航条外层的Ul
            var navUl = $("<ul></ul>").addClass("pagination");
            //首页
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
            //前一页
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //判断是否有首页
            if(result.map.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else{
                //添加首页和前一页翻页的单机事件
                firstPageLi.click(function(){
                    toPage(1);
                });
                prePageLi.click(function(){
                    toPage(result.map.pageInfo.pageNum-1);
                });
            }
            
            //后一页
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            //末页
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
            //判断是否有末页
            if(result.map.pageInfo.hasNextPage == false){
                lastPageLi.addClass("disabled");
                nextPageLi.addClass("disabled");
            }else{
                //添加末页和后一页翻页的单机事件
                lastPageLi.click(function(){
                    toPage(result.map.pageInfo.pages);
                });
                nextPageLi.click(function(){
                    toPage(result.map.pageInfo.pageNum+1);
                });
            }
            
            //添加到ul
            navUl.append(firstPageLi).append(prePageLi);
            
            //遍历页码数
            $.each(result.map.pageInfo.navigatepageNums,function(idx,item){
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                //如果当前页为正在遍历的页，则高亮显示，采用增加类的方法完成
                if(result.map.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                //给每个页码添加单击绑定事件
                numLi.click(function(){
                    toPage(item);
                });
                navUl.append(numLi);
            });
            //li加入ul，ul加入nav
            navUl.append(nextPageLi).append(lastPageLi);
            var navEle = $("<nav></nav>").append(navUl);
            $("#page_nav").append(navEle);
        }
        //清空表单样式及内容
        function reset_form(ele){
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }
        //增加员工的事件，弹出员工模态框
        $("#addBtn_modal").click(function(){
            //重置表单：
            reset_form("#addEmpModal form");
            //发送ajax请求查询部门信息
            getDepts("#addEmpModal select");
            //弹出模态框
            $('#addEmpModal').modal({
                backdrop:false
            });
        });
        //得到部门信息的函数
        function getDepts(ele){
            //先清空原来下拉框的值：
            $(ele).empty();
            $.ajax({
                //请求方式
                type : "GET", 
                //请求url
                url : "${path}/depts",
                //请求要带的数据，这里无需带数据
                //请求成功的回调函数
                success : function(result) {
                    $.each(result.map.deptList,function(){
                        //这里换用不传参的方式，采用this引用正在遍历的对象
                        var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                        optionEle.appendTo(ele);
                    });
                }
            });
        }
        //添加表单数据的前段校验
        function validate_add_form(){
            //1.获取需要校验的值
            //2.使用jQuery正则(api中常用正则)进行校验（校验插件的使用待更新）
            var empNameVal = $("#input_empName").val();
            //校验的正则表达式（可以搜索常用正则）
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5}$)/;
            //开始校验用户名
            if(!regName.test(empNameVal)){
                //alert("用户名只能是6-16位英文数字或2-5位汉字组合！");
                //将提示信息优化，使用bootstrap的样式，给父元素添加相应的类即可
                vilidate_form("#input_empName","error","用户名只能是6-16位英文数字或2-5位汉字组合！");
                //$("#input_empName").parent().addClass("has-error");
                //$("#input_empName").next(".help-block").text("用户名只能是6-16位英文数字或2-5位汉字组合！");
                return false;
            }else{
                vilidate_form("#input_empName","success","用户名正确！");
                //$("#input_empName").parent().addClass("has-success");
                //$("#input_empName").next(".help-block").text("用户名正确！");
            }
            //同理，校验邮箱
            var empEmailVal = $("#input_email").val();
            var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
            //开始校验邮箱
            if(!regEmail.test(empEmailVal)){
                //alert("邮箱不合法！");
                vilidate_form("#input_email","error","邮箱不合法！");
                //$("#input_email").parent().addClass("has-error");
                //$("#input_email").next(".help-block").text("邮箱不合法！");
                return false;
            }else{
                vilidate_form("#input_email","success","邮箱格式正确！");
                //$("#input_email").parent().addClass("has-success");
                //$("#input_email").next(".help-block").text("邮箱格式正确！");
            }
            return true;
        }
        //重新抽取校验函数完成之前重复样式的清除工作
        function vilidate_form(ele,status,msg){
                //清除当前校验状态
                $(ele).parent().removeClass("has-success has-error");
                $(ele).next(".help-block").text("");
            if("success" == status){
                $(ele).parent().addClass("has-success");
                $(ele).next(".help-block").text(msg);
            }else if("error" == status){
                $(ele).parent().addClass("has-error");
                $(ele).next(".help-block").text(msg);
            }
        }
        //为添加员工姓名输入框添加change事件，完成用户名重复的后端校验
        $("#input_empName").change(function(){
            //发送ajax请求，查询用户名是否重复
            var empName = this.value;
            $.ajax({
                //请求方式
                type : "POST", 
                //请求url
                url : "${path}/vadEmpName",
                //请求要带的数据
                data:"empName="+empName,
                //请求成功的回调函数
                success : function(result) {
                    if(result.code == 100){//成功，用户名可用
                        vilidate_form("#input_empName","success","用户名可用！");
                        $("#emp_saveBtn").attr("ajax-vad","success");
                    }else{//失败，用户名不可用
                        vilidate_form("#input_empName","error",result.map.vadFailMeg);
                        $("#emp_saveBtn").attr("ajax-vad","error");
                    }
                }
            });
        });
        //为添加员工的保存按钮绑定单击事件
        $("#emp_saveBtn").click(function(){
            
            //1.5发送ajax请求之前进行用户名是否可用的校验：
            if($(this).attr("ajax-vad")=="error"){
                return false;
            }
            //1.进行表单数据的校验
             if(!validate_add_form()){
                return false;
            } 
            //2.模态框中保存按钮发送ajax请求
            $.ajax({
                //请求方式
                type : "POST", 
                //请求url
                url : "${path}/emp",
                //请求要带的数据，这里是模态框中的值，
                //这里应该采用的是jQuery的序列化表单的方法进行提取表单数据，serialize();
                //表单序列化的数据：$("#addEmpModal form").serialize();
                data:$("#addEmpModal form").serialize(),
                //请求成功的回调函数
                success : function(result) {
                    //alert(result.msg);
                    //添加一个后端校验：
                    if(result.code == 100){//校验成功
                        //1.成功完成模态框则关闭
                        $("#addEmpModal").modal('hide')
                        //2.来到列表最后一页
                        //发送ajax请求，显示最后一页，因为插件做了参数合理化配置，可以配置一个比较大的数字
                        //这样，查到的总是最后一页记录，我们使用全局的总记录数
                        toPage(golbalTotalCount);
                    }else{//校验失败
                        //console.log(result);
                        var emailErrorMsg = result.map.fieldErrors.email;
                        var empNameErrorMsg = result.map.fieldErrors.empName;
                        //有哪个字段的信息就显示哪个
                        if(undefined != emailErrorMsg){
                            //显示邮箱错误信息（之前已经抽象为 方法）
                            vilidate_form("#input_email","error",emailErrorMsg);
                        }
                        if(undefined != empNameErrorMsg){
                            //显示名称错误信息
                            vilidate_form("#input_empName","error",empNameErrorMsg);
                        }
                    }
                    
                }
            });
        });
        //根据id得到员工信息的函数
        function getEmp(id){
            //发送ajax请求查询员工信息
            $.ajax({
                //REST风格的url，直接使用/传参
                url:"${path}/getEmp/"+id,
                type:"GET",
                success:function(result){
                    console.log(result);
                    var empData = result.map.emp;
                    //在页面的指定位置显示相关的值
                    $("#empName_static").text(empData.empName);
                    $("#input_update_email").val(empData.email);
                    //合理使用选择器，选择修改模态框的gender
                    //将单选框的选中项改为val为指定值的选项
                    $("#editEmpModal input[name=gender]").val([empData.gender]);
                    //$("#editEmpModal input[name='genger'][value='"+empData.gender+"']").prop("checked",true);
                    //$("#gender2_update_input").val([empData.gender]);
                    //下拉框同理
                    $("#editEmpModal select").val([empData.dId]);
                }
            });
        }
        /*直接给页面的新增按钮绑定单击事件时不行的，因为按钮是通过发送ajax请求加载数据时
            加载的，而我们的click()是页面加载完时绑定的事件，也就是说按钮事件先于按钮出生的时间
            于是，便出现了问题
        */
        //这里详细的on的用法暂时不展开
        $(document).on("click",".edit_btn",function(){
            //alert("绑定编辑事件成功！");
            //1.查出部门信息，员工信息等
                //这里重新抽取一下得到部门的方法，使其可以得到指定的部门信息，添加到指定的元素
            //发送ajax请求查询部门信息
            getDepts("#editEmpModal select");
            //通过为编辑按钮添加自定义属性保存ID值，可以方便的完成ID值的保存与获取
            getEmp($(this).attr("editId"));
            
            //弹出模态框之前传递ID值给更新按钮
            $("#emp_updateBtn").attr("updateId",$(this).attr("editId"));
            //2.弹出修改模态框
            $('#editEmpModal').modal({
                backdrop:false
            });
        });
        //为更新按钮绑定单击事件，进行更新
        $("#emp_updateBtn").click(function(){
            //由于有邮箱输入，更新之前需要进行邮箱的格式验证
            //直接抽取前面的代码进行校验邮箱
            var empEmailVal = $("#input_update_email").val();
            var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
            //开始校验邮箱
            if(!regEmail.test(empEmailVal)){
                vilidate_form("#input_update_email","error","邮箱不合法！");
                return false;
            }else{
                vilidate_form("#input_update_email","success","邮箱格式正确！");
            }
            //取得要更新的ID
            var udpId = $(this).attr("updateId");
            //邮箱验证通过，发送ajax的PUT请求，完成员工更新
            $.ajax({
                //要根据ID更新，需要取得ID的值，通过同样的自定义属性的方法，将ID传到按钮上
                
                url:"${path}/updateEmp/"+udpId,
                type:"PUT",
                //数据时序列化表单的数据
                data:$("#editEmpModal form").serialize(),
                success:function(result){
                    //alert("处理成功！");
                    //1.关闭模态框框
                    $("#editEmpModal").modal('hide');
                    //2.回到本页面，本页面如何获取呢，我们通过构建分页条时的pageInfo得到本页页码
                        //再像之前保存总记录数一样，保存本页数据到全局变量即可！
                    toPage(golbalCurrentPage);
                }
            });
        });
        //同理，为后来动态生成的删除按钮绑定单击事件，依旧使用on方法
        $(document).on("click",".del_btn",function(){
            //1.弹出确认删除对话框（需要获取员工姓名进行确认）
                //这里下标从0开始
            var empName = $(this).parents("tr").find("td:eq(1)").text();
            var delID = $(this).attr("delId");
            if(confirm("确认删除："+empName+"吗？")){
                //确认胡发送ajax请求进行删除
                $.ajax({
                    url:"${path}/deleteEmp/"+delID,
                    type:"DELETE",
                    //无数据传送
                    success:function(result){
                        //alert(result.msg);
                        //2.回到本页面，本页面如何获取呢，我们通过构建分页条时的pageInfo得到本页页码
                        //再像之前保存总记录数一样，保存本页数据到全局变量即可！
                    toPage(golbalCurrentPage);
                    }
                });
            }
        });
    </script>
</body>
</html>

　　

 　　接下来我们完成全选全不选的样式操作：

    //全选框的单击事件：
        $("#check_all").click(function(){
            //直接使用attr()时是undefined，因为我们定义的时候没有定义，我们使用prop()
            //$(this).prop("checked");
            //下面的单个的框的值就是全选的状态的值
            $(".check_item").prop("checked",$(this).prop("checked"));
        });

　　当然，我们还可以再完善当不全选中时，总的选择框也被选中：

//为后来动态生成的check_item绑定单击事件
        $(document).on("click",".check_item",function(){
            //若当前选中的元素为5个全选，则全选按钮选中
                //当然，这里不能写死，如果将来变为6个7个还需改动
            var flag = $(".check_item:checked").length == $(".check_item").length;
                $("#check_all").prop("checked",flag);
            
        });

　　接下来我们进行删除的逻辑：

　　　　前台页面主要是拼装相关的名称和ID值方便操作：

<%@ 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("path",request.getContextPath());
%>
<!-- 推荐以 / 开始的相对路径（以服务器的根路径为相对路径） ,这里的${path}是前带 / 后不带 / 的路径-->
<link href="${path}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <!-- 先引入jQuery，再引入js -->
<script type="text/javascript" src="${path}/static/bootstrap/js/jquery.min.js"> </script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 员工修改模态框 -->
    <div class="modal fade" id="editEmpModal" 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"><span>&times;</span></button>
            <h4 class="modal-title">员工修改</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <!-- 显示员工姓名的静态组件 -->
              <div class="form-group">
                <label for="input_empName" class="col-sm-2 control-label">empName</label>
                <div class="col-sm-10">
                 <p class="form-control-static" id="empName_static"></p>
                </div>
              </div>
              <!-- 输入员工邮箱 -->
              <div class="form-group">
                <label for="input_email" class="col-sm-2 control-label">email</label>
                <div class="col-sm-10">
                  <input type="text" name="email" class="form-control" id="input_update_email" placeholder="email">
                  <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_update_input" 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" style="120px">    
                    <!-- 部门名称是变动的，这里保存员工是只保存ID的形式 -->
                    <select class="form-control" name="dId">
                        
                    </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_updateBtn">更新</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 员工新增模态框 -->
    <div class="modal fade" id="addEmpModal" 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"><span>&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">添加员工</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <!-- 输入员工姓名 -->
              <div class="form-group">
                <label for="input_empName" class="col-sm-2 control-label">empName</label>
                <div class="col-sm-10">
                  <input type="text" name="empName" class="form-control" id="input_empName" placeholder="empName">
                  <span class="help-block"></span>
                </div>
              </div>
              <!-- 输入员工邮箱 -->
              <div class="form-group">
                <label for="input_email" class="col-sm-2 control-label">email</label>
                <div class="col-sm-10">
                  <input type="text" name="email" class="form-control" id="input_email" placeholder="email">
                  <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" style="120px">    
                    <!-- 部门名称是变动的，这里保存员工是只保存ID的形式 -->
                    <select class="form-control" name="dId">
                        
                    </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_saveBtn">保存</button>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
        <!-- 分为四大行 -->
        <!-- 标题 -->
        <div class="row">
             <div class="col-md-12">
                <font size="20">SSM-CRUD</font>
             </div>
        </div>
        <!-- 按钮 -->
        <div class="row">
            <!-- 偏移4列 -->
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary" id="addBtn">新增</button>
                <button type="button" class="btn btn-danger" id="delAllBtn">删除</button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_table">
                    <thead>
                        <tr>
                            <!-- 新增批量删除的checkbox -->
                            <th>
                                <input type="checkbox" id="check_all"/>
                            </th>
                            <th>#</th>
                            <th>empName</th>
                            <th>empEmail</th>
                            <th>gender</th>
                            <th>deptName</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 分页信息 -->
        <div class="row">
            <!-- 分页文字信息，其中分页信息都封装在pageInfo中 -->
            <div class="col-md-6" id="page_info">
                
            </div>
            <!-- 分页条 -->
            <div class="col-md-6" id="page_nav">
                
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //全局总记录数，用于查最后一页
        var golbalTotalCount,golbalCurrentPage;
        //页面加载完成后直接发送ajax请求，取得分页数据
        $(function(){
            //加载完页面就通过这个函数发ajax请求
            toPage(1);
        });
        //跳转到某页的函数
        function toPage(pn){
            $.ajax({
                //请求方式
                type : "GET", 
                //请求url
                url : "${path}/emps",
                //请求要带的数据
                data :"pn="+pn,
                //请求成功的回调函数
                success : function(result) {
                    //1.解析JSON返回员工数据
                    build_emps_table(result);
                    //2.解析生成分页信息(分页条与分页导航)
                    build_pages_info(result);
                    build_pages_nav(result);
                }
            });
        }
        //解析员工数据
        function build_emps_table(result){
            //清空表格数据
            $("#emps_table tbody").empty();
            //员工数据
            var emps = result.map.pageInfo.list;
            //使用jQuery遍历数组，遍历的是取出来的json数组，可以通过开发工具查看JSON结构
            $.each(emps,function(idx,item){
                //增加删除的多选框
                var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                //使用jQuery生成各列
                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);
                //添加操作按钮，通过jQuery的一些操作（例如CSS的追加CSS操作），完成按钮的构建
                var editBtn = $("<button></button>").addClass("btn btn-info btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("编辑");
                //为编辑按钮添加自定义属性，保存员工的ID
                editBtn.attr("editId",item.empId);
                var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm del_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                .append("删除");
                //为删除按钮添加自定义属性，保存要删除的员工ID
                delBtn.attr("delId",item.empId);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                //链式操作完成列的添加（链式操作由于jQuery返回的是原元素）
                $("<tr></tr>").append(checkboxTd)
                    .append(empIdTd)
                    .append(empNameTd)
                    .append(emailTd)
                    .append(genderTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo($("#emps_table tbody"));
            });
        }
        //生成分页信息
        function build_pages_info(result){
            //清空分页数据
            $("#page_info").empty();
            //当前页
            var currentPage = result.map.pageInfo.pageNum;
            //总页数
            var totalPage = result.map.pageInfo.pages;
            //总记录数
            var totalCount = result.map.pageInfo.total;
            //给全局记录数赋值
            golbalTotalCount = result.map.pageInfo.total;
            //给当前页赋值，完成当前页信息的保存
            golbalCurrentPage = currentPage;
            $("#page_info").append("当前第："+currentPage+"页，"+"总共："+totalPage+"页，"+"总共："+totalCount+"条记录");
        }
        //生成分页导航信息
        function build_pages_nav(result){
            //清空分页导航信息
            $("#page_nav").empty();
            //导航条外层的Ul
            var navUl = $("<ul></ul>").addClass("pagination");
            //首页
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
            //前一页
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //判断是否有首页
            if(result.map.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else{
                //添加首页和前一页翻页的单机事件
                firstPageLi.click(function(){
                    toPage(1);
                });
                prePageLi.click(function(){
                    toPage(result.map.pageInfo.pageNum-1);
                });
            }
            
            //后一页
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            //末页
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
            //判断是否有末页
            if(result.map.pageInfo.hasNextPage == false){
                lastPageLi.addClass("disabled");
                nextPageLi.addClass("disabled");
            }else{
                //添加末页和后一页翻页的单机事件
                lastPageLi.click(function(){
                    toPage(result.map.pageInfo.pages);
                });
                nextPageLi.click(function(){
                    toPage(result.map.pageInfo.pageNum+1);
                });
            }
            
            //添加到ul
            navUl.append(firstPageLi).append(prePageLi);
            
            //遍历页码数
            $.each(result.map.pageInfo.navigatepageNums,function(idx,item){
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                //如果当前页为正在遍历的页，则高亮显示，采用增加类的方法完成
                if(result.map.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                //给每个页码添加单击绑定事件
                numLi.click(function(){
                    toPage(item);
                });
                navUl.append(numLi);
            });
            //li加入ul，ul加入nav
            navUl.append(nextPageLi).append(lastPageLi);
            var navEle = $("<nav></nav>").append(navUl);
            $("#page_nav").append(navEle);
        }
        //清空表单样式及内容
        function reset_form(ele){
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }
        //增加员工的事件，弹出员工模态框
        $("#addBtn").click(function(){
            //重置表单：
            reset_form("#addEmpModal form");
            //发送ajax请求查询部门信息
            getDepts("#addEmpModal select");
            //弹出模态框
            $('#addEmpModal').modal({
                backdrop:false
            });
        });
        //得到部门信息的函数
        function getDepts(ele){
            //先清空原来下拉框的值：
            $(ele).empty();
            $.ajax({
                //请求方式
                type : "GET", 
                //请求url
                url : "${path}/depts",
                //请求要带的数据，这里无需带数据
                //请求成功的回调函数
                success : function(result) {
                    $.each(result.map.deptList,function(){
                        //这里换用不传参的方式，采用this引用正在遍历的对象
                        var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                        optionEle.appendTo(ele);
                    });
                }
            });
        }
        //添加表单数据的前段校验
        function validate_add_form(){
            //1.获取需要校验的值
            //2.使用jQuery正则(api中常用正则)进行校验（校验插件的使用待更新）
            var empNameVal = $("#input_empName").val();
            //校验的正则表达式（可以搜索常用正则）
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5}$)/;
            //开始校验用户名
            if(!regName.test(empNameVal)){
                //alert("用户名只能是6-16位英文数字或2-5位汉字组合！");
                //将提示信息优化，使用bootstrap的样式，给父元素添加相应的类即可
                vilidate_form("#input_empName","error","用户名只能是6-16位英文数字或2-5位汉字组合！");
                //$("#input_empName").parent().addClass("has-error");
                //$("#input_empName").next(".help-block").text("用户名只能是6-16位英文数字或2-5位汉字组合！");
                return false;
            }else{
                vilidate_form("#input_empName","success","用户名正确！");
                //$("#input_empName").parent().addClass("has-success");
                //$("#input_empName").next(".help-block").text("用户名正确！");
            }
            //同理，校验邮箱
            var empEmailVal = $("#input_email").val();
            var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
            //开始校验邮箱
            if(!regEmail.test(empEmailVal)){
                //alert("邮箱不合法！");
                vilidate_form("#input_email","error","邮箱不合法！");
                //$("#input_email").parent().addClass("has-error");
                //$("#input_email").next(".help-block").text("邮箱不合法！");
                return false;
            }else{
                vilidate_form("#input_email","success","邮箱格式正确！");
                //$("#input_email").parent().addClass("has-success");
                //$("#input_email").next(".help-block").text("邮箱格式正确！");
            }
            return true;
        }
        //重新抽取校验函数完成之前重复样式的清除工作
        function vilidate_form(ele,status,msg){
                //清除当前校验状态
                $(ele).parent().removeClass("has-success has-error");
                $(ele).next(".help-block").text("");
            if("success" == status){
                $(ele).parent().addClass("has-success");
                $(ele).next(".help-block").text(msg);
            }else if("error" == status){
                $(ele).parent().addClass("has-error");
                $(ele).next(".help-block").text(msg);
            }
        }
        //为添加员工姓名输入框添加change事件，完成用户名重复的后端校验
        $("#input_empName").change(function(){
            //发送ajax请求，查询用户名是否重复
            var empName = this.value;
            $.ajax({
                //请求方式
                type : "POST", 
                //请求url
                url : "${path}/vadEmpName",
                //请求要带的数据
                data:"empName="+empName,
                //请求成功的回调函数
                success : function(result) {
                    if(result.code == 100){//成功，用户名可用
                        vilidate_form("#input_empName","success","用户名可用！");
                        $("#emp_saveBtn").attr("ajax-vad","success");
                    }else{//失败，用户名不可用
                        vilidate_form("#input_empName","error",result.map.vadFailMeg);
                        $("#emp_saveBtn").attr("ajax-vad","error");
                    }
                }
            });
        });
        //为添加员工的保存按钮绑定单击事件
        $("#emp_saveBtn").click(function(){
            
            //1.5发送ajax请求之前进行用户名是否可用的校验：
            if($(this).attr("ajax-vad")=="error"){
                return false;
            }
            //1.进行表单数据的校验
             if(!validate_add_form()){
                return false;
            } 
            //2.模态框中保存按钮发送ajax请求
            $.ajax({
                //请求方式
                type : "POST", 
                //请求url
                url : "${path}/emp",
                //请求要带的数据，这里是模态框中的值，
                //这里应该采用的是jQuery的序列化表单的方法进行提取表单数据，serialize();
                //表单序列化的数据：$("#addEmpModal form").serialize();
                data:$("#addEmpModal form").serialize(),
                //请求成功的回调函数
                success : function(result) {
                    //alert(result.msg);
                    //添加一个后端校验：
                    if(result.code == 100){//校验成功
                        //1.成功完成模态框则关闭
                        $("#addEmpModal").modal('hide')
                        //2.来到列表最后一页
                        //发送ajax请求，显示最后一页，因为插件做了参数合理化配置，可以配置一个比较大的数字
                        //这样，查到的总是最后一页记录，我们使用全局的总记录数
                        toPage(golbalTotalCount);
                    }else{//校验失败
                        //console.log(result);
                        var emailErrorMsg = result.map.fieldErrors.email;
                        var empNameErrorMsg = result.map.fieldErrors.empName;
                        //有哪个字段的信息就显示哪个
                        if(undefined != emailErrorMsg){
                            //显示邮箱错误信息（之前已经抽象为 方法）
                            vilidate_form("#input_email","error",emailErrorMsg);
                        }
                        if(undefined != empNameErrorMsg){
                            //显示名称错误信息
                            vilidate_form("#input_empName","error",empNameErrorMsg);
                        }
                    }
                    
                }
            });
        });
        //根据id得到员工信息的函数
        function getEmp(id){
            //发送ajax请求查询员工信息
            $.ajax({
                //REST风格的url，直接使用/传参
                url:"${path}/getEmp/"+id,
                type:"GET",
                success:function(result){
                    console.log(result);
                    var empData = result.map.emp;
                    //在页面的指定位置显示相关的值
                    $("#empName_static").text(empData.empName);
                    $("#input_update_email").val(empData.email);
                    //合理使用选择器，选择修改模态框的gender
                    //将单选框的选中项改为val为指定值的选项
                    $("#editEmpModal input[name=gender]").val([empData.gender]);
                    //$("#editEmpModal input[name='genger'][value='"+empData.gender+"']").prop("checked",true);
                    //$("#gender2_update_input").val([empData.gender]);
                    //下拉框同理
                    $("#editEmpModal select").val([empData.dId]);
                }
            });
        }
        /*直接给页面的新增按钮绑定单击事件时不行的，因为按钮是通过发送ajax请求加载数据时
            加载的，而我们的click()是页面加载完时绑定的事件，也就是说按钮事件先于按钮出生的时间
            于是，便出现了问题
        */
        //这里详细的on的用法暂时不展开
        $(document).on("click",".edit_btn",function(){
            //alert("绑定编辑事件成功！");
            //1.查出部门信息，员工信息等
                //这里重新抽取一下得到部门的方法，使其可以得到指定的部门信息，添加到指定的元素
            //发送ajax请求查询部门信息
            getDepts("#editEmpModal select");
            //通过为编辑按钮添加自定义属性保存ID值，可以方便的完成ID值的保存与获取
            getEmp($(this).attr("editId"));
            
            //弹出模态框之前传递ID值给更新按钮
            $("#emp_updateBtn").attr("updateId",$(this).attr("editId"));
            //2.弹出修改模态框
            $('#editEmpModal').modal({
                backdrop:false
            });
        });
        //为更新按钮绑定单击事件，进行更新
        $("#emp_updateBtn").click(function(){
            //由于有邮箱输入，更新之前需要进行邮箱的格式验证
            //直接抽取前面的代码进行校验邮箱
            var empEmailVal = $("#input_update_email").val();
            var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
            //开始校验邮箱
            if(!regEmail.test(empEmailVal)){
                vilidate_form("#input_update_email","error","邮箱不合法！");
                return false;
            }else{
                vilidate_form("#input_update_email","success","邮箱格式正确！");
            }
            //取得要更新的ID
            var udpId = $(this).attr("updateId");
            //邮箱验证通过，发送ajax的PUT请求，完成员工更新
            $.ajax({
                //要根据ID更新，需要取得ID的值，通过同样的自定义属性的方法，将ID传到按钮上
                
                url:"${path}/updateEmp/"+udpId,
                type:"PUT",
                //数据时序列化表单的数据
                data:$("#editEmpModal form").serialize(),
                success:function(result){
                    //alert("处理成功！");
                    //1.关闭模态框框
                    $("#editEmpModal").modal('hide');
                    //2.回到本页面，本页面如何获取呢，我们通过构建分页条时的pageInfo得到本页页码
                        //再像之前保存总记录数一样，保存本页数据到全局变量即可！
                    toPage(golbalCurrentPage);
                }
            });
        });
        //同理，为后来动态生成的删除按钮绑定单击事件，依旧使用on方法
        $(document).on("click",".del_btn",function(){
            //1.弹出确认删除对话框（需要获取员工姓名进行确认）
                //这里下标从0开始，加了元素后td为第三个td
            var empName = $(this).parents("tr").find("td:eq(2)").text();
            var delID = $(this).attr("delId");
            if(confirm("确认删除："+empName+" 吗？")){
                //确认胡发送ajax请求进行删除
                $.ajax({
                    url:"${path}/deleteEmp/"+delID,
                    type:"DELETE",
                    //无数据传送
                    success:function(result){
                        //alert(result.msg);
                        //2.回到本页面，本页面如何获取呢，我们通过构建分页条时的pageInfo得到本页页码
                        //再像之前保存总记录数一样，保存本页数据到全局变量即可！
                    toPage(golbalCurrentPage);
                    }
                });
            }
        });
        //全选框的单击事件：
        $("#check_all").click(function(){
            //直接使用attr()时是undefined，因为我们定义的时候没有定义，我们使用prop()
            //$(this).prop("checked");
            //下面的单个的框的值就是全选的状态的值
            $(".check_item").prop("checked",$(this).prop("checked"));
        });
        //为后来动态生成的check_item绑定单击事件，完成未选满时全选框不选中
        $(document).on("click",".check_item",function(){
            //若当前选中的元素为5个全选，则全选按钮选中
                //当然，这里不能写死，如果将来变为6个7个还需改动
            var flag = $(".check_item:checked").length == $(".check_item").length;
                $("#check_all").prop("checked",flag);
            
        });
        //为批量删除按钮绑定单击事件
        $("#delAllBtn").click(function(){
            //$(".check_item:checked")
            //遍历每一个被选中的多选框
                //将员工姓名拼串
                var empNames = "";
                var empIds="";
            $.each($(".check_item:checked"),function(){
                //寻找要删除的员工姓名
                var empName = $(this).parents("tr").find("td:eq(2)").text();
                empNames += empName+",";
                //组装员工ID字符串，和组装姓名类似，只不过id所在列不一样
                var empId = $(this).parents("tr").find("td:eq(1)").text();
                empIds += empId+"-";
            });
            //去除多余的逗号
            empNames = empNames.substring(0,empNames.length-1);
            //去掉多余的 -
            empIds = empIds.substring(0,empIds.length-1);
            if(confirm("确认删除："+empNames+" 吗?")){
                //确认删除，发ajax请求
                $.ajax({
                    url:"${path}/deleteEmp/"+empIds,
                    type:"DELETE",
                    success:function(result){
                        alert(result.msg);
                        //依旧回到本页面
                        toPage(golbalCurrentPage);
                    }
                });
            }
        });
    </script>
</body>
</html>

　　　　controller部分进行删除的整合：

package cn.crud.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.validation.Valid;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

import cn.crud.bean.Employee;
import cn.crud.bean.Msg;
import cn.crud.service.EmpService;

/**
 * 处理员工的CRUD请求
 * @author Administrator
 *
 */
@Controller
public class EmpController {
    
    @Autowired
    private EmpService empService;
    
    /**
     * 按照ID单个删除的方法
     * 注意这是个RESTful风格的DELETE请求
     * @return
     */
    /*@RequestMapping(value="/deleteEmp/{id}",method=RequestMethod.DELETE)
    @ResponseBody
    public Msg deleteEmpByID(@PathVariable("id") Integer id){
        //System.out.println(id);
        //调用sevice进行删除处理
        empService.deteleEmp(id);
        return Msg.success();
    }*/
    /**
     * 将单个与批量二合一
     * @return
     */
    @RequestMapping(value="/deleteEmp/{ids}",method=RequestMethod.DELETE)
    @ResponseBody
    public Msg deleteEmpByID(@PathVariable("ids") String ids){
        if(ids.contains("-")){//包含-则为多个删除
            //按- 分割为字符数组
            String[] del_ids = ids.split("-");
            //组装符合要求的id数组
            List<Integer> idsList = new ArrayList<Integer>();
            for (String id : del_ids) {
                idsList.add(Integer.parseInt(id));
            }
            empService.deleteBatch(idsList);
            return Msg.success();
        }else{//单个删除
            Integer id = Integer.parseInt(ids);
            //调用sevice进行删除处理
            empService.deteleEmp(id);
            return Msg.success();
        }
        
    }
    /**
     * 保存员工的ajax请求的方法
     * 这里我们引入RESTful风格的PUT请求
     *可以发送时由于我们之前有RESTful风格的配置
     * 此处必须使得占位符的名称与bean的属性名称一致
     * 如果直接发送ajax的PUT请求，会造成除了路径带过来的id，其余都是Null，造成请求对象封装不上
     * SQL就会变成：update table where id = ? 的形式，形成语法错误
     *     而造成这种错误的原因就是
     *             tomcat把请求中的数据封装在一个map中
     *             而springMVC只是调用request.getParameter()进行取值
     *             我们可以猜测直接拿request原生方法也是无法取值的！
     *     这里我们得出结论：
     *         PUT请求不能直接发！tomcat不会直接封装，查看相关源码分析会发现默认只封装POST！
     *         springMVC针对这个情况也有对应的解决方案，配置一个过滤器：HttpPutFormContentFilter
     * @return
     */
    @RequestMapping(value="/updateEmp/{empId}",method=RequestMethod.PUT)
    @ResponseBody
    public Msg updateEmp(Employee employee){
        //System.out.println(employee);
        //调用service完成逻辑
        empService.updateEmp(employee);
        return Msg.success();
    }
    
    /**
     * 处理得到员工信息ajax请求的方法
     * 统一将返回信息封装在Msg中
     * !这里开始使用RESTful风格的url
     * @PathVariable("id")当名称相同时是可以省略的
     *                     【更新】：无法省略！
     * @return
     */
    @RequestMapping(value="/getEmp/{id}",method=RequestMethod.GET)
    @ResponseBody
    public Msg getEmp(@PathVariable("id") Integer id){
        //System.out.println("controller层获取的ID:"+id);
        //调用service完成操作
        Employee employee = empService.getEmp(id);
        //System.out.println(employee);
        //将serivce返回的对象返回给页面
        return Msg.success().add("emp", employee);
    }
    
    /**
     * 校验用户名是否重复，是否可用的方法
     * @return 返回的是我们包装的对象
     */
    @RequestMapping("/vadEmpName")
    @ResponseBody
    public Msg vadEmpName(@RequestParam("empName") String empName){
        //在判断是否重复之前，先进行格式是否正确的校验
        //校验的正则表达式（可以搜索常用正则）
        //特别注意这里的正则和js的正则不一样，加 / 包裹的是js的写法
        String regName = "(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5}$)";
        boolean b = empName.matches(regName);
        if(!b){
            return Msg.fail().add("vadFailMeg", "用户名格式错误！");
        }
        //后端用户名重复性校验
        boolean isRepet = empService.vadEmpName(empName);
        if(isRepet){
            return Msg.success();
        }else{
            return Msg.fail().add("vadFailMeg", "用户名已被占用！");
        }
        
    }
    
    /**
     * 处理添加员工的ajax请求的方法
     * 　1.要支持JSR303后端校验，需要导入hibernate-validate的包
     * 2.在bean的属性中添加相关的注解
     * 3.在方法入参添加相关的注解
     *     @Valid后跟需要校验的对象，BindingResult时校验的结果
     * @return
     */
    @RequestMapping(value="/emp",method=RequestMethod.POST)
    @ResponseBody
    public Msg saveEmp(@Valid Employee employee,BindingResult result){
        if(result.hasErrors()){//若存在错误，校验失败
            //保存错误信息的map,便于封装
            Map<String,Object> errors = new HashMap<String,Object>();
            //返回错误信息
            List<FieldError> fieldErrors = result.getFieldErrors();
            for (FieldError fieldError : fieldErrors) {//遍历错误信息
                //错误的字段名：
                System.out.println("错误的字段名："+fieldError.getField());
                //错误的提示信息
                System.out.println("错误信息："+fieldError.getDefaultMessage());
                //封装错误信息
                errors.put(fieldError.getField(), fieldError.getDefaultMessage());
            }
            //最后封装如Msg的map中进行返回
            return Msg.fail().add("fieldErrors", errors);
        }else{
            empService.saveEmp(employee);
            return Msg.success();
        }
        
    }
    
    /**
     * 分页信息的AJAX请求
     * @ResponseBody可以将返回的对象转为JSON字符串
     * 此注解需要引入jackson的包（以及注解驱动的配置等，这里已经进行配置）
     * 将返回信息包装在msg里
     */
    @RequestMapping("/emps")
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1") Integer pn, Model model){
        //改造为一个分页查询
        //在查询之前传入分页参数：起始页和每页记录数
        PageHelper.startPage(pn, 5);
        //后面紧跟的查询就是分页查询
        List<Employee> empList = empService.getAll();
        //用PageInfo对结果进行包装，只需要将PageInfo交给页面即可，这里面封装了详细的信息,第二个参数为需要连续显示的记录数
        PageInfo page = new PageInfo(empList,5);
        //直接将pageInfo对象进行返回
        //将pageInfo放在msg里进行返回，链式操作返回对象本身
        return Msg.success().add("pageInfo", page);
    }
    
    /**
     * 分页查询员工数据
     */
    //@RequestMapping("/emps")
    public String getEmps(@RequestParam(value="pn",defaultValue="1") Integer pn, Model model){
        //改造为一个分页查询
        //在查询之前传入分页参数：起始页和每页记录数
        PageHelper.startPage(pn, 5);
        //后面紧跟的查询就是分页查询
        List<Employee> empList = empService.getAll();
        //用PageInfo对结果进行包装，只需要将PageInfo交给页面即可，这里面封装了详细的信息,第二个参数为需要连续显示的记录数
        PageInfo page = new PageInfo(empList,5);
        model.addAttribute("pageInfo", page);
        return "list";
    }
}

　　　　service部分主要是mapper的运用：

package cn.crud.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import cn.crud.bean.Employee;
import cn.crud.bean.EmployeeExample;
import cn.crud.bean.EmployeeExample.Criteria;
import cn.crud.dao.EmployeeMapper;
/**
 * 处理员工的service
 * @author Administrator
 *
 */
@Service
public class EmpService {
    
    @Autowired
    private EmployeeMapper employeeMapper;

    /**
     * 查询所有员工
     * @return
     */
    public List<Employee> getAll() {
        /**
         * 没有查询条件的查询所有，带部门信息
         */
        return employeeMapper.selectByExampleWithDept(null);
    }
    /**
     * 增加员工
     * @param employee
     */
    public void saveEmp(Employee employee) {
        //我们选择有选择的保存，因为ID是自增的
        employeeMapper.insertSelective(employee);
        
    }
    /**
     * 检验用户名是否可用
     * @param empName
     * @return
     */
    public boolean vadEmpName(String empName) {
        /*按要求统计符合条件记录数，返回一个整数*/
        //构建example
        EmployeeExample example = new EmployeeExample();
        //构建查询条件 criteria
        Criteria criteria = example.createCriteria();
        //构建条件
        criteria.andEmpNameEqualTo(empName);
        //返回符合条件的记录数，==0时可用
        long count = employeeMapper.countByExample(example);
        return count == 0;
    }
    /**
     * 根据ID查询出整个员工信息
     * @param id
     * @return
     */
    public Employee getEmp(Integer id) {
        //System.out.println("service层获取的ID:"+id);
        //调用dao层的方法
        Employee employee = employeeMapper.selectByPrimaryKey(id);
        return employee;
    }
    /**
     * 更新员工的方法
     * @param employee
     */
    public void updateEmp(Employee employee) {
        // 选择按照主键有选择的更新（姓名等无法进行更细）
        employeeMapper.updateByPrimaryKeySelective(employee);
        
    }
    /**
     * 按照ID删除员工
     * @param id
     */
    public void deteleEmp(Integer id) {
        //调用dao删除即可
        employeeMapper.deleteByPrimaryKey(id);
        
    }
    public void deleteBatch(List<Integer> idsList) {
        EmployeeExample example = new EmployeeExample();
        Criteria criteria = example.createCriteria();
        //id再某个范围的 delete from where id in()...
        criteria.andEmpIdIn(idsList);
        //按照条件删除
        employeeMapper.deleteByExample(example);
        
    }


}

 　　至此，我们完成了所有得增删改查！

　　　　小结如下：