Maven+ajax+SSM实现删除 3、尚硅谷_SSM高级整合_使用ajax操作实现删除的功能

转载自：https://www.cnblogs.com/kebibuluan/p/9020381.html

3、尚硅谷_SSM高级整合_使用ajax操作实现删除的功能

点击删除的时候，要删除联系人，这里同点击编辑按钮一样给删除按钮添加点击事件的时候不能使用

$(".delete_btn").click(function(){

});

这种方式，因为上面的代码是放在JavaScript代码中执行的，在页面加载完成之前JavaScript就执行完毕了，但是上面的两个按钮是在页面加载完成之后，使用ajax获得后台的数据之后创建的

意思是在执行JavaScript代码的时候按钮对象还为null

//给编辑按钮添加点击事件
$(document).on("click",".delete_btn",function(){
//首先需要获得要删除的联系人的姓名如何获得了

});

所以只能采用下面的这种方式

第二：第二删除按钮的时候需要弹出一个对话框，在对话框中显示要删除的联系人的姓名，如何获得了

我们可以看出btn的父亲节点是tr节点，然后我们查找tr父节点下的第二个td节点对应的就是我们的名字

32、尚硅谷_SSM高级整合_删除_删除单一员工.avi

我们来看下代码

EmployeeController.java

package com.atguigu.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.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.Msg;
import com.atguigu.crud.dao.EmployeeMapper;
import com.atguigu.crud.service.EmployeeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

/**
 * 
 * 处理员工的增删改查操作
 * */
@Controller
public class EmployeeController {
   
    private static final Msg MSG = new Msg();
    @Autowired
    private EmployeeService employeeService;

    
    /**
     * 负责将PageInfo对象转化成json对象
     * */
    @RequestMapping("/emps")
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue ="1") Integer pn) {        
        //使用mybatis分页插件 pn表示当前查询的页数，5表示每页显示第几条
        System.out.println("EmployeeController is called pn"+pn);
        PageHelper.startPage(pn, 5);
        //在PageHelper.startPage(pn, 5);后面的查询语句就可以实现分页查询
        List<Employee> list = employeeService.getAll();
        //我们将查询的结果封装到PageInfo对象之中,5表示右下角导航栏的数目是5
         PageInfo info = new PageInfo(list,5);
         Msg msg = MSG;
         msg.setCode(100);
         msg.setMsg("业务操作成功");
         msg.getExtend().put("pageInfo", info);
        return msg;
    }
    /**
     * 这里一定要注意采用的resetful风格，请求方式必须是post
     * */
    @RequestMapping(value="/save",method=RequestMethod.POST)
    @ResponseBody
    public Msg save(@Valid Employee employee,BindingResult result){
        System.out.println("save is calle:"+employee.toString());
        //这里首先要判断用户输入的参数是否合法
        Map<String,Object> err_map = new HashMap<String, Object>();
        Msg msg = MSG;
        if(result.hasErrors()){            
             List<FieldError> errors = result.getFieldErrors();
            for( FieldError error: errors){
                System.out.println("错误的字段是："+error.getField());
                System.out.println("错误的消息是："+error.getDefaultMessage());
                err_map.put(error.getField(), error.getDefaultMessage());
            }
            msg.setCode(200);
            msg.setMsg("员工保存失败");
            msg.getExtend().put("err_map", err_map);
        }else{
            employeeService.save(employee);
            msg.setCode(100);
            msg.setMsg("保存员工数据成功");
        }    
        return msg;
    }
    
    @RequestMapping("/isUserExist")
    @ResponseBody
    public Msg isUserExist(@RequestParam("empName") String empName){
        System.out.println("isUserExist is called:"+empName);
        Msg msg = MSG;
        Boolean exits = employeeService.isUserExist(empName);
        if(exits){
            //200表示联系人已经存在
            msg.setCode(200);
        }else{
            //100表示联系人可用
            msg.setCode(100);
        }
        return msg;
    }
    
    //通过id查询到员工的信息，采用resetful风格
    @RequestMapping(value="/emp/{id}",method=RequestMethod.GET)
    @ResponseBody
    public Msg getEmpById(@PathVariable("id") String id){
        System.out.println("getEmpById is called:"+id);
        Msg msg = MSG;
        Employee employee = employeeService.getEmpById(id);
        msg.setCode(100);
        msg.setMsg("查询联系人成功");
        msg.getExtend().put("emp", employee);
        return msg;
    }
    
    
    //通过id修改联系人,特别需要注意的是这里采用的是PUT的方式

    @RequestMapping(value="/update/{empId}",method=RequestMethod.PUT)
    @ResponseBody
    public Msg updateEmpById(Employee employee){
        System.out.println("updateEmpById is called:"+employee.toString());
        Msg msg = MSG;
        employeeService.updateEmpById(employee);
        msg.setCode(100);
        msg.setMsg("更新数据成功");
        return msg;
    }
    
    //发生ajax删除联系人
    @RequestMapping(value="/delete/{id}",method=RequestMethod.DELETE)
    @ResponseBody
    public Msg delete(@PathVariable("id")Integer id){
         employeeService.delete(id);
         System.out.println("delete is called:"+id);
        Msg msg = new Msg();
        msg.setCode(100);
        msg.setMsg("删除联系人成功");
        return msg;
    }
}

EmployeeService.java

package com.atguigu.crud.service;

import java.util.List;

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

import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.EmployeeExample;
import com.atguigu.crud.bean.EmployeeExample.Criteria;
import com.atguigu.crud.dao.EmployeeMapper;

@Service
public class EmployeeService {

    @Autowired
    private EmployeeMapper employeeMapper;
    
    public List<Employee> getAll(){
        List<Employee> list = employeeMapper.selectByExampleWithDept(null);
        return list;
    }

    public void save(Employee employee) {
        // TODO Auto-generated method stub
        //这里要注意insert和insertSelevite的区别，使用insert将会null字段插入到数据库中。insertselct不会
        //现在要实现员工的id自增长，employee中的id字段传递过来的值是null字段，所以不能使用insert，会将null字段插入
        employeeMapper.insertSelective(employee);
        
    }

    public Boolean isUserExist(String empName) {
        // TODO Auto-generated method stub
        //采用mybatis的高级查找功能，判断当前用户是否存在
        /***
         * MyBatis的Mapper接口以及Example的实例函数及详解
         * mybatis的逆向工程中会生成实例及实例对应的example，example用于添加条件，相当where后面的部分 
            xxxExample example = new xxxExample(); 
            Criteria criteria = new Example().createCriteria();
            User user = XxxMapper.selectByPrimaryKey(100); //相当于select * from user where id = 100

         * */
        EmployeeExample example = new EmployeeExample();
        Criteria createCriteria = example.createCriteria();
        createCriteria.andEmpNameEqualTo(empName);
        long countByExample = employeeMapper.countByExample(example);
        if(countByExample > 0){
            return true;
        }else{
            return false;
        }
    
    }

    public Employee getEmpById(String id) {
        // TODO Auto-generated method stub
        Employee employee = employeeMapper.selectByPrimaryKey(Integer.parseInt(id));
        return employee;
    }

    
    public void updateEmpById(Employee employee) {
        // TODO Auto-generated method stub
        //这里Employee字段中携带的那些字段的存在值就更新那些字段
        //
        employeeMapper.updateByPrimaryKeySelective(employee);
    }

    public void delete(Integer id) {
        // TODO Auto-generated method stub
        employeeMapper.deleteByPrimaryKey(id);
    }
}

index.jsp

<%@ 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>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
        http://localhost:3306/crud
 -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.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>

  <!-- 修改员工信息的对话框 -->
<div class="modal fade" id="updateEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">修改员工</h4>
      </div>
      <div class="modal-body">
          <!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
         <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                          <p class="form-control-static" id="empNameModalUpdate" name="empName"></p>
                      <span id="name_span_update" class="help-block"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                      <input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil">
                      <span id="email_span_update" class="help-block"></span>
                    </div>
                  </div>
                  
               <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                         <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="F"> 男
                            </label>
                            <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="M"> 女
                            </label>
                    </div>
                  </div>
                  
                   <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-5">
                         <select name="dId" id="dIdModalUpdate"class="form-control">
                         
                    </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 ="saveEmpUpdate">更新</button>
      </div>
    </div>
  </div>
</div>


  <!-- 新增员工信息的对话框 -->
<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新增员工</h4>
      </div>
      <div class="modal-body">
          <!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
         <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                      <input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name">
                      <span id="name_span" class="help-block"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                      <input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil">
                      <span id="email_span" class="help-block"></span>
                    </div>
                  </div>
                  
               <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                         <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="F"> 男
                            </label>
                            <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="M"> 女
                            </label>
                    </div>
                  </div>
                  
                   <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-5">
                         <select name="dId" id="dIdModal"class="form-control">
                         
                    </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 ="saveEmp">保存</button>
      </div>
    </div>
  </div>
</div>

    <!-- 搭建显示页面 -->
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary" id="addEmp">新增</button>
                <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>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                   
                
                </tbody>
                    
                </table>
            </div>
        </div>

        <!-- 显示分页信息 -->
        <div class="row">
            <!--分页文字信息  -->
            <div class="col-md-6" id="page_info_area"></div>
            <!-- 分页条信息 -->
            <div class="col-md-6" id="page_nav_area"></div>
                

        </div>
</div>
     
     <!-- 当页面加载完成之后发起ajax请求获得数据 ，不清楚的看锋利jquery教程相当的经典-->
     <script type="text/javascript">
     
     //定义一个全局变量，获得当前中的记录数
     var total;
     
      //定义一个全局变量，记录当前修改的页面
      var currentPage;
     
     $(function(){
         //页面加载完毕，去首页获得对应的数据
         to_page(1);
        
         });
      
     
     //使用ajax到后台服务器查询数据
     function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn="+pn,
            type:"GET",
            success:function(result){
                //console.log(result);
                //1、解析并显示员工数据
                build_emps_table(result);
                //2、解析并显示分页信息
                build_page_info(result);
                //3、解析显示分页条数据
                build_page_nav(result);
            }
        });
    }
              
     
         
         //解析服务器返回的json数据，并在员工表中显示出来
         function build_emps_table(result){
             //在构建之前先清空所有的数据
             $("#emps_table tbody").empty();
             //第一步：获得所有的员工数据
             var emps = result.extend.pageInfo.list;
             //第二步：对员工数据进行遍历显示出来
             $.each(emps,function(index,item){
                 var empIdTd = $("<td></td>").append(item.empId);
                 var empNameTd = $("<td></td>").append(item.empName);
                 var gender = item.gender == 'M'?"女":"男";
                 var genderTd = $("<td></td>").append(gender);
                 var emailTd = $("<td></td>").append(item.email);
                 var departmentNameTd = $("<td></td>").append(item.department.deptName);
                 //添加编辑按钮
                     var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                     var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");

                    var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                    
                    //这里我们点击编辑按钮的时候，在弹出编辑对话框之前我们要使用ajax到后台去查询对应的员工的信息，这里需要点击编辑按钮的时候，需要得到被修改员工的id，这里设计的比较巧秒，我们在创建出编辑按钮的时候，给编辑按钮添加一个自定义的属性。该属性值就是员工的id

  //               在点击编辑按钮的时候我们就可以通过该属性获得的该员工的id
  
                     editBtn.attr("edit_id",item.empId);
                 //将上面的table表td数据添加到tr中，这里是一个链式操作
                 $("<tr></tr>").append(empIdTd)
                 .append(empNameTd)
                 .append(genderTd)
                 .append(emailTd)
                 .append(departmentNameTd)
                 .append(btnTd)
                 .appendTo("#emps_table tbody");
                 //"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典
                 
                 
             });
             
         }
         
         //解析显示分页信息
         function build_page_info(result){
             $("#page_info_area").empty();
             $("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+"页,"+"总共"+result.extend.pageInfo.pages+"页,"+"总共"+
                     result.extend.pageInfo.total+"条记录");
             total =  result.extend.pageInfo.total;
             currentPage = result.extend.pageInfo.pageNum;
             
         }
         //解析右下角的导航栏
         function build_page_nav(result){
                //page_nav_area
             $("#page_nav_area").empty();
             var ul = $("<ul></ul>").addClass("pagination");            
             //构建元素
             var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
             var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;")); 
             //判断是否有前一页，如果没有前一页就不能点击
             if(result.extend.pageInfo.hasPreviousPage == false){
                 firstPageLi.addClass("disabled");
                 prePageLi.addClass("disabled");
             }
             //给前一页和首页添加按钮点击事件
             firstPageLi.click(function(){
                 to_page(1);
                 
             });
             
             prePageLi.click(function(){
                 //跳转到当前页的前一页
                 to_page(result.extend.pageInfo.pageNum-1);
                 
             });
             
             var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
             var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
             
             //如果没有下一页不能被点击
             if(result.extend.pageInfo.hasNextPage == false){
                 nextPageLi.addClass("disabled");
                 lastPageLi.addClass("disabled");
             }
             
             //给下一页和尾页添加点击事件
             nextPageLi.click(function(){
                 to_page(result.extend.pageInfo.pageNum+1);
             });
             
             lastPageLi.click(function(){
                 to_page(result.extend.pageInfo.pages);
             });
             
             //添加首页和前一页 的提示
             ul.append(firstPageLi).append(prePageLi);
             //1,2，3遍历给ul中添加页码提示
             $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
                 var numLi = $("<li></li>").append($("<a></a>").append(item));
                 //判断当前遍历的如果是当前正在显示的页面，应该高亮显示
                 if(result.extend.pageInfo.pageNum == item){
                     numLi.addClass("active");
                 }
                 //添加点击事件
                 numLi.click(function(){
                     //点击的时候重新使用ajax到服务器查询数据
                     to_page(item);
                 });
                 ul.append(numLi);
             });
             //添加下一页和末页 的提示
             ul.append(nextPageLi).append(lastPageLi);        
             //把ul加入到nav
             var navEle = $("<nav></nav>").append(ul);
             navEle.appendTo("#page_nav_area");
         } 
         
         //点击新增按钮，弹出新增加员工的对话框
         $("#addEmp").click(function(){
             //首先清空页面的所有数据
             //将jquery对象转化成docment对象，调用docment对象的reset方法
             $("#addEmpModal form")[0].reset();
             $("#name_span").text("");
             $("#empNameModal").parent().removeClass("has-success has-error");
             $("#dIdModal").empty();
             
             
             var parent = $("#dIdModal");
             //使用ajax请求部门的数据
             $.ajax(
                     {
                         url:"${APP_PATH}/depts",
                            type:"GET",
                            success:function(result){
                                //对result数据进行解析添加到
                                var depts = result.extend.depts;
                                $.each(depts,function(index,item){
                                    //给option选项设置值应该是deptid
                                    var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
                                    parent.append(opt);
                                });
                            }
                 
                 
                     }
                     );
              //弹出对话框
             $('#addEmpModal').modal({
                 backdrop:'static'                   
             })
         });
         
          //点击保存联系人
           $("#saveEmp").click(function(){
              
              //判断当前的联系人是否可用
               if( $(this).attr("isUserExist")=="yes"){
                   return false;
               }
               
               //首先判断输入的参数是否满足规则
               if(!validate_add_form()){
                   return false;
               } 
               
               
              
               
               $.ajax({
                   url:"${APP_PATH}/save",
                   data:$("#addEmpModal form").serialize(),
                   type:"post",
                   success:function(result){
                       
                       //首先需要判断后端返回的结果中，后端对用户的校验结果
                      //alert(result.extend.err_map.email);
                      //alert(result.extend.err_map.empName);
                      //这里需要注意的是如果邮箱格式错误，姓名正确，result.extend.err_map.email中就像携带错误的信息，result.extend.err_map.empName的信息是undefined
                      
                      if(result.code == 100){
                        //保存联系人成功需要做下面的几件事情
                          //第一件事情就是让新建联系人的对话框摸太框消失
                          $("#addEmpModal").modal('hide');
                          //第二个跳转到最后一页
                          //这里如何跳转到最后一页了，mybatis分页插件这里提供了一个功能，例如现在员工总数是100人，每页显示5人，最大的分页数目就是5，你如果输入6
                          //也是按照最大的5来进行查询。员工的总数肯定是大于最大的分页数目的，现在要查询最后一页的数据，我以员工的总数进行查询
                          //使用ajax重新再查询下最后一页员工的数目
                          //
                          to_page(total);
                      }else{
                          alert(result.extend.err_map.email);
                          //说明邮箱格式错误
                          if(undefined != result.extend.err_map.email){
                              alert(result.extend.err_map.email);
                              $("#emailModal").parent().removeClass("has-success has-error");
                              $("#email_span").text("");
                              $("#emailModal").parent().addClass("has-error");
                             //给span节点添加.help-block属性
                              $("#email_span").addClass("help-block").text(result.extend.err_map.email);
                          }
                          //说明姓名格式有错误
                          if(undefined != result.extend.err_map.empName){
                            //添加元素状态之前。先清空清除当前元素的校验状态
                              $("#empNameModal").parent().removeClass("has-success has-error");
                              $("#name_span").text("");
                             //给当前节点的父元素添加has-error属性
                              $("#empNameModal").parent().addClass("has-error");
                             //给span节点添加.help-block属性
                             $("#name_span").addClass("help-block").text(result.extend.err_map.empName);
                          }
                          
                      }
                     
                      
                       
                       
                       
                   }
               });
               
           });
          
          //juqery前台校验数据
          
        //校验表单数据
        function validate_add_form(){
            //1、拿到要校验的数据，使用正则表达式
            var empName = $("#empNameModal").val();
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            if(!regName.test(empName)){
                //添加元素状态之前。先清空清除当前元素的校验状态
                 $("#empNameModal").parent().removeClass("has-success has-error");
                 $("#name_span").text("");
                //给当前节点的父元素添加has-error属性
                 $("#empNameModal").parent().addClass("has-error");
                //给span节点添加.help-block属性
                $("#name_span").addClass("help-block").text("姓名格式不正确");
                return false;
            }else{
                 $("#empNameModal").parent().removeClass("has-success has-error");
                 $("#name_span").text("");
                //给当前节点的父元素添加has-error属性
                 $("#empNameModal").parent().addClass("has-success");
                //给span节点添加.help-block属性
                $("#name_span").addClass("help-block").text("");
            };
            
            //2、校验邮箱信息
            var email = $("#emailModal").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                 $("#emailModal").parent().removeClass("has-success has-error");
                 $("#email_span").text("");
                 $("#emailModal").parent().addClass("has-error");
                //给span节点添加.help-block属性
                $("#email_span").addClass("help-block").text("邮箱格式不正确");
                return false;
            }else{
                 $("#emailModal").parent().removeClass("has-success has-error");
                 $("#email_span").text("");
                $("#emailModal").parent().addClass("has-success");
                //给span节点添加.help-block属性
                $("#email_span").addClass("help-block").text("");
            }
            return true;
        }
          
           //给输入联系人的input添加change事件，判断当前联系人是否可用
            $("#empNameModal").change(function(){
                //this表示当前操作的对象，是docment类型
                //获得当前输入的name的值
                var name=$(this).val();
                $.ajax({
                    url:"${APP_PATH}/isUserExist",
                    type:"post",
                    data:"empName="+name,
                    success:function(result){
                        if(result.code == 200){
                            //说明该联系人已经在后台存在不可以
                            //添加元素状态之前。先清空清除当前元素的校验状态
                            $("#empNameModal").parent().removeClass("has-success has-error");
                            $("#name_span").text("");
                           //给当前节点的父元素添加has-error属性
                            $("#empNameModal").parent().addClass("has-error");
                           //给span节点添加.help-block属性
                           $("#name_span").addClass("help-block").text("该联系人已经存在");
                       
                           //如果当前联系人已经存在，点击保存联系人案例的时候，就会失败，我们给保存联系人的按钮添加一个自定义属性用来标识当前添加的联系人是否存在
                            $("#saveEmp").attr("isUserExist","yes");
                        }else{
                            
                            //说明该联系人可用
                             $("#empNameModal").parent().removeClass("has-success has-error");
                             $("#name_span").text("");
                            //给当前节点的父元素添加has-error属性
                             $("#empNameModal").parent().addClass("has-success");
                            //给span节点添加.help-block属性
                            $("#name_span").addClass("help-block").text("该联系人可用");
                             $("#saveEmp").attr("isUserExist","no");
                            
                        }
                        
                    }
                    
                    
                });
            });
         
           //给编辑按钮添加点击事件
           $(document).on("click",".edit_btn",function(){
         
               
               //弹出模态对话框
               //首先清空页面的所有数据
             //将jquery对象转化成docment对象，调用docment对象的reset方法
             $("#updateEmpModal form")[0].reset();
             $("#name_span_update").text("");
             $("#email_span_update").text("");
             $("#empNameModalUpdate").parent().removeClass("has-success has-error");
             $("#emailModalUpdate").parent().removeClass("has-success has-error");
             $("#dIdModalUpdate").empty();
             //发送ajax请求获得对应的部门信息
              
             var parent = $("#dIdModalUpdate");
             //使用ajax请求部门的数据
             $.ajax(
                     {
                         url:"${APP_PATH}/depts",
                            type:"GET",
                            success:function(result){
                                //对result数据进行解析添加到
                                var depts = result.extend.depts;
                                $.each(depts,function(index,item){
                                    //给option选项设置值应该是deptid
                                    var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
                                    parent.append(opt);
                                });
                            }
                 
                 
                     }
                     );
             
               //使用ajax请求获得对应的员工信息
                         var emp_id = $(this).attr("edit_id");     
               
                         //给编辑联系人的对话框中国的更新按钮添加自定义属性，这样在编辑联系人页面中就可以获得被编辑联系人的id
                         $("#saveEmpUpdate").attr("edit_id",emp_id);
                          $.ajax(
                         {
   
                          url:"${APP_PATH}/emp/"+emp_id,
                            type:"GET",
                            success:function(result){
                                //在对话框中显示显示姓名 p标签是一个文本使用text
                                $("#empNameModalUpdate").text(result.extend.emp.empName);
                                //给邮箱复制，input对话框使用val
                                $("#emailModalUpdate").val(result.extend.emp.email);
                                //接下来要让该联系人对应的性别被选中，如何实现了
                                 //首先找到id为updateEmpModal对话框下的name等于gender的input元素。这个元素就是单选框。val中传入的值就是男就是对应的
                                 //男的单选框被选中
                                $("#updateEmpModal input[name=gender]").val([result.extend.emp.gender]);
                                $("#updateEmpModal select").val([result.extend.emp.dId]);
                            }
                 
                 
                     }
                     );
             
              //弹出对话框
             $('#updateEmpModal').modal({
                 backdrop:'static'                   
             })
             
           });
           
           
           //给编辑联系人的保存按钮增加点击事件
           $("#saveEmpUpdate").click(function(){
               
               //使用ajax提交数据到后台更新数据这里需要
               //强调的是我们采用的是put方式的提交
               // data:$("#addEmpModal form").serialize()传递的请求参数中必须携带一个_method
               var emp_id = $(this).attr("edit_id");
       
               $.ajax({
                   url:"${APP_PATH}/update/"+emp_id,                  
                    type:"PUT",
                    data:$("#updateEmpModal form").serialize(),
                  success:function(result){
                     //修改联系人成功之后，关闭修改联系人的摸态对话框
                     if(result.code == 100){
                         $("#updateEmpModal").modal('hide');
                         //跳转到当前的修改页面
                         to_page(currentPage);
                     }
                  }
               });
               
           });
           
           
            //接下来实现删除操作，给删除按钮添加点击事件
            //给编辑按钮添加点击事件
           $(document).on("click",".delete_btn",function(){
               //首先需要获得要删除的联系人的姓名如何获得了,主要这里不能写成parent，暂时还没有弄明白
               //alert($(this).parents("tr").find("td:eq(1)").text());
               //删除联系人的id
               var delete_id = $(this).parents("tr").find("td:eq(0)").text();
               //弹出确认对话框
               if(confirm("你确认删除"+$(this).parents("tr").find("td:eq(1)").text()+"吗?")){
                   //发生ajax删除联系人
                   $.ajax({
                       url:"${APP_PATH}/delete/"+ delete_id,
                       type:"DELETE",
                       success:function(result){
                         if(result.code == 100){
                             //说明删除联系人成功
                             //重新ajax请求到删除联系人的页面
                             to_page(currentPage);
                             
                         }
                           
                       }
                       
                       
                       
                   });
                   
               }
           });
     </script>
        
    </div>
</body>
</html>

通过上面的操作就达到了点击删除按钮单一删除联系人的目的

33、尚硅谷_SSM高级整合_删除_全选&全不选.avi

上面我们实现了单一删除，我们要实现全选删除如何实现了

要实现上面的全选操作，应该注意到页面是如何实现了，第一在表头应该添加一个checkbox，如果勾选中表头的checkbox可以让每个子选项下的checkbox从未选中状态变到选中状态，或者从选中状态变成

未选中状态

 <tr>
                       <!-- 在表头添加checkbox -->
                       <input type="checkbox" id="check_all"/>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
添加之后效果如下所示：

第二：每一行元素开头都也应该有一个checkbox

 $.each(emps,function(index,item){
                 //给每一行表记录都添加一个checkbox
                 var checkboxTd = $("<input type='checkbox' class='check_item'/>");
                 var empIdTd = $("<td></td>").append(item.empId);
                 var empNameTd = $("<td></td>").append(item.empName);
                 var gender = item.gender == 'M'?"女":"男";
                 var genderTd = $("<td></td>").append(gender);
                 var emailTd = $("<td></td>").append(item.email);
                 var departmentNameTd = $("<td></td>").append(item.department.deptName);
                 //添加编辑按钮
                     var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                     var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");

                    var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                    
                    //这里我们点击编辑按钮的时候，在弹出编辑对话框之前我们要使用ajax到后台去查询对应的员工的信息，这里需要点击编辑按钮的时候，需要得到被修改员工的id，这里设计的比较巧秒，我们在创建出编辑按钮的时候，给编辑按钮添加一个自定义的属性。该属性值就是员工的id

  //               在点击编辑按钮的时候我们就可以通过该属性获得的该员工的id
  
                     editBtn.attr("edit_id",item.empId);
                 //将上面的table表td数据添加到tr中，这里是一个链式操作
                 $("<tr></tr>").append(checkboxTd)
                  .append(empIdTd)
                 .append(empNameTd)
                 .append(genderTd)
                 .append(emailTd)
                 .append(departmentNameTd)
                 .append(btnTd)
                 .appendTo("#emps_table tbody");
                 //"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典
                 
                 
             });

 添加之后运行的效果如下所示：

我们接下来我们来实现全选和全不选的操作

当点击表头的checkbox的时候，我们应该首先获得该checkbox的选中状态，然后让每一行的checkbox的状态和表头的checkbox的状态一致，这样就达到了全选和全不选的目的

获取状态的时候如果要注意如果使用下面的代码

 //实现表头checkbox全选和全不选的操作
           $("#check_all").click(function(){
               //获得该表头checkbox的状态
               alert($(this).attr("checked"));
               
           });

运行的结果始终是

这里要注意使用attr获得属性值主要是用来获得自定义的属性值，而要获得固有的属性值要使用prop

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

 使用prop选中的值是true，为选中为false

 //实现表头checkbox全选和全不选的操作
           $("#check_all").click(function(){
               //获得该表头checkbox的状态
               var status = $(this).prop("checked");
               //让每一行的checkbox的状态等于表头checkbox的状态
               $(".check_item").prop("checked",status);
               
           });

这样我们就实现了全选和全不选的功能

接下来我们要实现下面的功能

如果表头的checbox处于未选中的状态，但是当每一行的checkbox都选中之后，我们要让表头的checkbox也处于选中状态，当表头的checkbox处于选中状态之后，如果有一行checkbox处于未选中

状态我们都要让表头处于未选中状态

那么我们应该给每一行的checkbox设置监听状态，但点击的时候判断当前页面被选中的checkbox的数目时候等于当前页面每页显示的数目，如何是就让表头的checkbox处于选中状态，否则就设置为未选中状态

 $(document).on("click",".check_item",function(){
               
               //第一步获得被选中的checkbox的长度
               var checked_length = $(".check_item:checked").length;
               //获得当前页面中全不的checkbox的长度
               var total_length = $(".check_item").length;
               
               //如果二二者长度相等说明当前的所有的checkbox都处于选中状态，此时
               //要让表头的checkbox处于选中状态
               if(checked_length == total_length){
                   $("#check_all").prop("checked",true);
               }else{
                   $("#check_all").prop("checked",false);
               }
               
           });

我们来看总的页面的代码

index.jsp

<%@ 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>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
        http://localhost:3306/crud
 -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.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>

  <!-- 修改员工信息的对话框 -->
<div class="modal fade" id="updateEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">修改员工</h4>
      </div>
      <div class="modal-body">
          <!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
         <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                          <p class="form-control-static" id="empNameModalUpdate" name="empName"></p>
                      <span id="name_span_update" class="help-block"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                      <input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil">
                      <span id="email_span_update" class="help-block"></span>
                    </div>
                  </div>
                  
               <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                         <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="F"> 男
                            </label>
                            <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="M"> 女
                            </label>
                    </div>
                  </div>
                  
                   <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-5">
                         <select name="dId" id="dIdModalUpdate"class="form-control">
                         
                    </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 ="saveEmpUpdate">更新</button>
      </div>
    </div>
  </div>
</div>


  <!-- 新增员工信息的对话框 -->
<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新增员工</h4>
      </div>
      <div class="modal-body">
          <!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
         <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                      <input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name">
                      <span id="name_span" class="help-block"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                      <input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil">
                      <span id="email_span" class="help-block"></span>
                    </div>
                  </div>
                  
               <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                         <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="F"> 男
                            </label>
                            <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="M"> 女
                            </label>
                    </div>
                  </div>
                  
                   <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-5">
                         <select name="dId" id="dIdModal"class="form-control">
                         
                    </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 ="saveEmp">保存</button>
      </div>
    </div>
  </div>
</div>

    <!-- 搭建显示页面 -->
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary" id="addEmp">新增</button>
                <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>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                   
                
                </tbody>
                    
                </table>
            </div>
        </div>

        <!-- 显示分页信息 -->
        <div class="row">
            <!--分页文字信息  -->
            <div class="col-md-6" id="page_info_area"></div>
            <!-- 分页条信息 -->
            <div class="col-md-6" id="page_nav_area"></div>
                

        </div>
</div>
     
     <!-- 当页面加载完成之后发起ajax请求获得数据 ，不清楚的看锋利jquery教程相当的经典-->
     <script type="text/javascript">
     
     //定义一个全局变量，获得当前中的记录数
     var total;
     
      //定义一个全局变量，记录当前修改的页面
      var currentPage;
     
     $(function(){
         //页面加载完毕，去首页获得对应的数据
         to_page(1);
        
         });
      
     
     //使用ajax到后台服务器查询数据
     function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn="+pn,
            type:"GET",
            success:function(result){
                //console.log(result);
                //1、解析并显示员工数据
                build_emps_table(result);
                //2、解析并显示分页信息
                build_page_info(result);
                //3、解析显示分页条数据
                build_page_nav(result);
            }
        });
    }
              
     
         
         //解析服务器返回的json数据，并在员工表中显示出来
         function build_emps_table(result){
             //在构建之前先清空所有的数据
             $("#emps_table tbody").empty();
             //第一步：获得所有的员工数据
             var emps = result.extend.pageInfo.list;
             //第二步：对员工数据进行遍历显示出来
             $.each(emps,function(index,item){
                 //给每一行表记录都添加一个checkbox
                 var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                 var empIdTd = $("<td></td>").append(item.empId);
                 var empNameTd = $("<td></td>").append(item.empName);
                 var gender = item.gender == 'M'?"女":"男";
                 var genderTd = $("<td></td>").append(gender);
                 var emailTd = $("<td></td>").append(item.email);
                 var departmentNameTd = $("<td></td>").append(item.department.deptName);
                 //添加编辑按钮
                     var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                     var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");

                    var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                    
                    //这里我们点击编辑按钮的时候，在弹出编辑对话框之前我们要使用ajax到后台去查询对应的员工的信息，这里需要点击编辑按钮的时候，需要得到被修改员工的id，这里设计的比较巧秒，我们在创建出编辑按钮的时候，给编辑按钮添加一个自定义的属性。该属性值就是员工的id

  //               在点击编辑按钮的时候我们就可以通过该属性获得的该员工的id
  
                     editBtn.attr("edit_id",item.empId);
                 //将上面的table表td数据添加到tr中，这里是一个链式操作
                 $("<tr></tr>").append(checkboxTd)
                  .append(empIdTd)
                 .append(empNameTd)
                 .append(genderTd)
                 .append(emailTd)
                 .append(departmentNameTd)
                 .append(btnTd)
                 .appendTo("#emps_table tbody");
                 //"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典
                 
                 
             });
             
         }
         
         //解析显示分页信息
         function build_page_info(result){
             $("#page_info_area").empty();
             $("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+"页,"+"总共"+result.extend.pageInfo.pages+"页,"+"总共"+
                     result.extend.pageInfo.total+"条记录");
             total =  result.extend.pageInfo.total;
             currentPage = result.extend.pageInfo.pageNum;
             
         }
         //解析右下角的导航栏
         function build_page_nav(result){
                //page_nav_area
             $("#page_nav_area").empty();
             var ul = $("<ul></ul>").addClass("pagination");            
             //构建元素
             var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
             var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;")); 
             //判断是否有前一页，如果没有前一页就不能点击
             if(result.extend.pageInfo.hasPreviousPage == false){
                 firstPageLi.addClass("disabled");
                 prePageLi.addClass("disabled");
             }
             //给前一页和首页添加按钮点击事件
             firstPageLi.click(function(){
                 to_page(1);
                 
             });
             
             prePageLi.click(function(){
                 //跳转到当前页的前一页
                 to_page(result.extend.pageInfo.pageNum-1);
                 
             });
             
             var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
             var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
             
             //如果没有下一页不能被点击
             if(result.extend.pageInfo.hasNextPage == false){
                 nextPageLi.addClass("disabled");
                 lastPageLi.addClass("disabled");
             }
             
             //给下一页和尾页添加点击事件
             nextPageLi.click(function(){
                 to_page(result.extend.pageInfo.pageNum+1);
             });
             
             lastPageLi.click(function(){
                 to_page(result.extend.pageInfo.pages);
             });
             
             //添加首页和前一页 的提示
             ul.append(firstPageLi).append(prePageLi);
             //1,2，3遍历给ul中添加页码提示
             $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
                 var numLi = $("<li></li>").append($("<a></a>").append(item));
                 //判断当前遍历的如果是当前正在显示的页面，应该高亮显示
                 if(result.extend.pageInfo.pageNum == item){
                     numLi.addClass("active");
                 }
                 //添加点击事件
                 numLi.click(function(){
                     //点击的时候重新使用ajax到服务器查询数据
                     to_page(item);
                 });
                 ul.append(numLi);
             });
             //添加下一页和末页 的提示
             ul.append(nextPageLi).append(lastPageLi);        
             //把ul加入到nav
             var navEle = $("<nav></nav>").append(ul);
             navEle.appendTo("#page_nav_area");
         } 
         
         //点击新增按钮，弹出新增加员工的对话框
         $("#addEmp").click(function(){
             //首先清空页面的所有数据
             //将jquery对象转化成docment对象，调用docment对象的reset方法
             $("#addEmpModal form")[0].reset();
             $("#name_span").text("");
             $("#empNameModal").parent().removeClass("has-success has-error");
             $("#dIdModal").empty();
             
             
             var parent = $("#dIdModal");
             //使用ajax请求部门的数据
             $.ajax(
                     {
                         url:"${APP_PATH}/depts",
                            type:"GET",
                            success:function(result){
                                //对result数据进行解析添加到
                                var depts = result.extend.depts;
                                $.each(depts,function(index,item){
                                    //给option选项设置值应该是deptid
                                    var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
                                    parent.append(opt);
                                });
                            }
                 
                 
                     }
                     );
              //弹出对话框
             $('#addEmpModal').modal({
                 backdrop:'static'                   
             })
         });
         
          //点击保存联系人
           $("#saveEmp").click(function(){
              
              //判断当前的联系人是否可用
               if( $(this).attr("isUserExist")=="yes"){
                   return false;
               }
               
               //首先判断输入的参数是否满足规则
               if(!validate_add_form()){
                   return false;
               } 
               
               
              
               
               $.ajax({
                   url:"${APP_PATH}/save",
                   data:$("#addEmpModal form").serialize(),
                   type:"post",
                   success:function(result){
                       
                       //首先需要判断后端返回的结果中，后端对用户的校验结果
                      //alert(result.extend.err_map.email);
                      //alert(result.extend.err_map.empName);
                      //这里需要注意的是如果邮箱格式错误，姓名正确，result.extend.err_map.email中就像携带错误的信息，result.extend.err_map.empName的信息是undefined
                      
                      if(result.code == 100){
                        //保存联系人成功需要做下面的几件事情
                          //第一件事情就是让新建联系人的对话框摸太框消失
                          $("#addEmpModal").modal('hide');
                          //第二个跳转到最后一页
                          //这里如何跳转到最后一页了，mybatis分页插件这里提供了一个功能，例如现在员工总数是100人，每页显示5人，最大的分页数目就是5，你如果输入6
                          //也是按照最大的5来进行查询。员工的总数肯定是大于最大的分页数目的，现在要查询最后一页的数据，我以员工的总数进行查询
                          //使用ajax重新再查询下最后一页员工的数目
                          //
                          to_page(total);
                      }else{
                          alert(result.extend.err_map.email);
                          //说明邮箱格式错误
                          if(undefined != result.extend.err_map.email){
                              alert(result.extend.err_map.email);
                              $("#emailModal").parent().removeClass("has-success has-error");
                              $("#email_span").text("");
                              $("#emailModal").parent().addClass("has-error");
                             //给span节点添加.help-block属性
                              $("#email_span").addClass("help-block").text(result.extend.err_map.email);
                          }
                          //说明姓名格式有错误
                          if(undefined != result.extend.err_map.empName){
                            //添加元素状态之前。先清空清除当前元素的校验状态
                              $("#empNameModal").parent().removeClass("has-success has-error");
                              $("#name_span").text("");
                             //给当前节点的父元素添加has-error属性
                              $("#empNameModal").parent().addClass("has-error");
                             //给span节点添加.help-block属性
                             $("#name_span").addClass("help-block").text(result.extend.err_map.empName);
                          }
                          
                      }
                     
                      
                       
                       
                       
                   }
               });
               
           });
          
          //juqery前台校验数据
          
        //校验表单数据
        function validate_add_form(){
            //1、拿到要校验的数据，使用正则表达式
            var empName = $("#empNameModal").val();
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            if(!regName.test(empName)){
                //添加元素状态之前。先清空清除当前元素的校验状态
                 $("#empNameModal").parent().removeClass("has-success has-error");
                 $("#name_span").text("");
                //给当前节点的父元素添加has-error属性
                 $("#empNameModal").parent().addClass("has-error");
                //给span节点添加.help-block属性
                $("#name_span").addClass("help-block").text("姓名格式不正确");
                return false;
            }else{
                 $("#empNameModal").parent().removeClass("has-success has-error");
                 $("#name_span").text("");
                //给当前节点的父元素添加has-error属性
                 $("#empNameModal").parent().addClass("has-success");
                //给span节点添加.help-block属性
                $("#name_span").addClass("help-block").text("");
            };
            
            //2、校验邮箱信息
            var email = $("#emailModal").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                 $("#emailModal").parent().removeClass("has-success has-error");
                 $("#email_span").text("");
                 $("#emailModal").parent().addClass("has-error");
                //给span节点添加.help-block属性
                $("#email_span").addClass("help-block").text("邮箱格式不正确");
                return false;
            }else{
                 $("#emailModal").parent().removeClass("has-success has-error");
                 $("#email_span").text("");
                $("#emailModal").parent().addClass("has-success");
                //给span节点添加.help-block属性
                $("#email_span").addClass("help-block").text("");
            }
            return true;
        }
          
           //给输入联系人的input添加change事件，判断当前联系人是否可用
            $("#empNameModal").change(function(){
                //this表示当前操作的对象，是docment类型
                //获得当前输入的name的值
                var name=$(this).val();
                $.ajax({
                    url:"${APP_PATH}/isUserExist",
                    type:"post",
                    data:"empName="+name,
                    success:function(result){
                        if(result.code == 200){
                            //说明该联系人已经在后台存在不可以
                            //添加元素状态之前。先清空清除当前元素的校验状态
                            $("#empNameModal").parent().removeClass("has-success has-error");
                            $("#name_span").text("");
                           //给当前节点的父元素添加has-error属性
                            $("#empNameModal").parent().addClass("has-error");
                           //给span节点添加.help-block属性
                           $("#name_span").addClass("help-block").text("该联系人已经存在");
                       
                           //如果当前联系人已经存在，点击保存联系人案例的时候，就会失败，我们给保存联系人的按钮添加一个自定义属性用来标识当前添加的联系人是否存在
                            $("#saveEmp").attr("isUserExist","yes");
                        }else{
                            
                            //说明该联系人可用
                             $("#empNameModal").parent().removeClass("has-success has-error");
                             $("#name_span").text("");
                            //给当前节点的父元素添加has-error属性
                             $("#empNameModal").parent().addClass("has-success");
                            //给span节点添加.help-block属性
                            $("#name_span").addClass("help-block").text("该联系人可用");
                             $("#saveEmp").attr("isUserExist","no");
                            
                        }
                        
                    }
                    
                    
                });
            });
         
           //给编辑按钮添加点击事件
           $(document).on("click",".edit_btn",function(){
         
               
               //弹出模态对话框
               //首先清空页面的所有数据
             //将jquery对象转化成docment对象，调用docment对象的reset方法
             $("#updateEmpModal form")[0].reset();
             $("#name_span_update").text("");
             $("#email_span_update").text("");
             $("#empNameModalUpdate").parent().removeClass("has-success has-error");
             $("#emailModalUpdate").parent().removeClass("has-success has-error");
             $("#dIdModalUpdate").empty();
             //发送ajax请求获得对应的部门信息
              
             var parent = $("#dIdModalUpdate");
             //使用ajax请求部门的数据
             $.ajax(
                     {
                         url:"${APP_PATH}/depts",
                            type:"GET",
                            success:function(result){
                                //对result数据进行解析添加到
                                var depts = result.extend.depts;
                                $.each(depts,function(index,item){
                                    //给option选项设置值应该是deptid
                                    var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
                                    parent.append(opt);
                                });
                            }
                 
                 
                     }
                     );
             
               //使用ajax请求获得对应的员工信息
                         var emp_id = $(this).attr("edit_id");     
               
                         //给编辑联系人的对话框中国的更新按钮添加自定义属性，这样在编辑联系人页面中就可以获得被编辑联系人的id
                         $("#saveEmpUpdate").attr("edit_id",emp_id);
                          $.ajax(
                         {
   
                          url:"${APP_PATH}/emp/"+emp_id,
                            type:"GET",
                            success:function(result){
                                //在对话框中显示显示姓名 p标签是一个文本使用text
                                $("#empNameModalUpdate").text(result.extend.emp.empName);
                                //给邮箱复制，input对话框使用val
                                $("#emailModalUpdate").val(result.extend.emp.email);
                                //接下来要让该联系人对应的性别被选中，如何实现了
                                 //首先找到id为updateEmpModal对话框下的name等于gender的input元素。这个元素就是单选框。val中传入的值就是男就是对应的
                                 //男的单选框被选中
                                $("#updateEmpModal input[name=gender]").val([result.extend.emp.gender]);
                                $("#updateEmpModal select").val([result.extend.emp.dId]);
                            }
                 
                 
                     }
                     );
             
              //弹出对话框
             $('#updateEmpModal').modal({
                 backdrop:'static'                   
             })
             
           });
           
           
           //给编辑联系人的保存按钮增加点击事件
           $("#saveEmpUpdate").click(function(){
               
               //使用ajax提交数据到后台更新数据这里需要
               //强调的是我们采用的是put方式的提交
               // data:$("#addEmpModal form").serialize()传递的请求参数中必须携带一个_method
               var emp_id = $(this).attr("edit_id");
       
               $.ajax({
                   url:"${APP_PATH}/update/"+emp_id,                  
                    type:"PUT",
                    data:$("#updateEmpModal form").serialize(),
                  success:function(result){
                     //修改联系人成功之后，关闭修改联系人的摸态对话框
                     if(result.code == 100){
                         $("#updateEmpModal").modal('hide');
                         //跳转到当前的修改页面
                         to_page(currentPage);
                     }
                  }
               });
               
           });
           
           
            //接下来实现删除操作，给删除按钮添加点击事件
            //给编辑按钮添加点击事件
           $(document).on("click",".delete_btn",function(){
               //首先需要获得要删除的联系人的姓名如何获得了,主要这里不能写成parent，暂时还没有弄明白
               //alert($(this).parents("tr").find("td:eq(1)").text());
               //删除联系人的id
               var delete_id = $(this).parents("tr").find("td:eq(0)").text();
               //弹出确认对话框
               if(confirm("你确认删除"+$(this).parents("tr").find("td:eq(1)").text()+"吗?")){
                   //发生ajax删除联系人
                   $.ajax({
                       url:"${APP_PATH}/delete/"+ delete_id,
                       type:"DELETE",
                       success:function(result){
                         if(result.code == 100){
                             //说明删除联系人成功
                             //重新ajax请求到删除联系人的页面
                             to_page(currentPage);
                             
                         }
                           
                       }
                       
                       
                       
                   });
                   
               }
           });
            
           //实现表头checkbox全选和全不选的操作
           $("#check_all").click(function(){
               //获得该表头checkbox的状态
               var status = $(this).prop("checked");
               //让每一行的checkbox的状态等于表头checkbox的状态
               $(".check_item").prop("checked",status);
               
           });
           
           //给每一行的checkbox设置监听事件
           //接下来我们要实现下面的功能

        //如果表头的checbox处于未选中的状态，
//但是当每一行的checkbox都选中之后，我们要让表头的checkbox也处于选中状态，当表头的checkbox处于选中状态之后，如果有一行checkbox处于未选中

//状态我们都要让表头处于未选中状态

//那么我们应该给每一行的checkbox设置监听状态，但点击的时候判断当前页面被选中的checkbox的数目时候等于当前页面每页显示的数目，如何是就让表头的checkbox处于选中状态，否则就设置为未选中状态
           $(document).on("click",".check_item",function(){
               
               //第一步获得被选中的checkbox的长度
               var checked_length = $(".check_item:checked").length;
               //获得当前页面中全不的checkbox的长度
               var total_length = $(".check_item").length;
               
               //如果二二者长度相等说明当前的所有的checkbox都处于选中状态，此时
               //要让表头的checkbox处于选中状态
               if(checked_length == total_length){
                   $("#check_all").prop("checked",true);
               }else{
                   $("#check_all").prop("checked",false);
               }
               
           });

     </script>
        
    </div>
</body>
</html>

点击删除的时候，要删除联系人，这里同点击编辑按钮一样给删除按钮添加点击事件的时候不能使用

$(".delete_btn").click(function(){

});

这种方式，因为上面的代码是放在JavaScript代码中执行的，在页面加载完成之前JavaScript就执行完毕了，但是上面的两个按钮是在页面加载完成之后，使用ajax获得后台的数据之后创建的

意思是在执行JavaScript代码的时候按钮对象还为null

//给编辑按钮添加点击事件
$(document).on("click",".delete_btn",function(){
//首先需要获得要删除的联系人的姓名如何获得了

});

所以只能采用下面的这种方式

第二：第二删除按钮的时候需要弹出一个对话框，在对话框中显示要删除的联系人的姓名，如何获得了

我们可以看出btn的父亲节点是tr节点，然后我们查找tr父节点下的第二个td节点对应的就是我们的名字

32、尚硅谷_SSM高级整合_删除_删除单一员工.avi

我们来看下代码

EmployeeController.java

package com.atguigu.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.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.Msg;
import com.atguigu.crud.dao.EmployeeMapper;
import com.atguigu.crud.service.EmployeeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

/**
 * 
 * 处理员工的增删改查操作
 * */
@Controller
public class EmployeeController {
   
    private static final Msg MSG = new Msg();
    @Autowired
    private EmployeeService employeeService;

    
    /**
     * 负责将PageInfo对象转化成json对象
     * */
    @RequestMapping("/emps")
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue ="1") Integer pn) {        
        //使用mybatis分页插件 pn表示当前查询的页数，5表示每页显示第几条
        System.out.println("EmployeeController is called pn"+pn);
        PageHelper.startPage(pn, 5);
        //在PageHelper.startPage(pn, 5);后面的查询语句就可以实现分页查询
        List<Employee> list = employeeService.getAll();
        //我们将查询的结果封装到PageInfo对象之中,5表示右下角导航栏的数目是5
         PageInfo info = new PageInfo(list,5);
         Msg msg = MSG;
         msg.setCode(100);
         msg.setMsg("业务操作成功");
         msg.getExtend().put("pageInfo", info);
        return msg;
    }
    /**
     * 这里一定要注意采用的resetful风格，请求方式必须是post
     * */
    @RequestMapping(value="/save",method=RequestMethod.POST)
    @ResponseBody
    public Msg save(@Valid Employee employee,BindingResult result){
        System.out.println("save is calle:"+employee.toString());
        //这里首先要判断用户输入的参数是否合法
        Map<String,Object> err_map = new HashMap<String, Object>();
        Msg msg = MSG;
        if(result.hasErrors()){            
             List<FieldError> errors = result.getFieldErrors();
            for( FieldError error: errors){
                System.out.println("错误的字段是："+error.getField());
                System.out.println("错误的消息是："+error.getDefaultMessage());
                err_map.put(error.getField(), error.getDefaultMessage());
            }
            msg.setCode(200);
            msg.setMsg("员工保存失败");
            msg.getExtend().put("err_map", err_map);
        }else{
            employeeService.save(employee);
            msg.setCode(100);
            msg.setMsg("保存员工数据成功");
        }    
        return msg;
    }
    
    @RequestMapping("/isUserExist")
    @ResponseBody
    public Msg isUserExist(@RequestParam("empName") String empName){
        System.out.println("isUserExist is called:"+empName);
        Msg msg = MSG;
        Boolean exits = employeeService.isUserExist(empName);
        if(exits){
            //200表示联系人已经存在
            msg.setCode(200);
        }else{
            //100表示联系人可用
            msg.setCode(100);
        }
        return msg;
    }
    
    //通过id查询到员工的信息，采用resetful风格
    @RequestMapping(value="/emp/{id}",method=RequestMethod.GET)
    @ResponseBody
    public Msg getEmpById(@PathVariable("id") String id){
        System.out.println("getEmpById is called:"+id);
        Msg msg = MSG;
        Employee employee = employeeService.getEmpById(id);
        msg.setCode(100);
        msg.setMsg("查询联系人成功");
        msg.getExtend().put("emp", employee);
        return msg;
    }
    
    
    //通过id修改联系人,特别需要注意的是这里采用的是PUT的方式

    @RequestMapping(value="/update/{empId}",method=RequestMethod.PUT)
    @ResponseBody
    public Msg updateEmpById(Employee employee){
        System.out.println("updateEmpById is called:"+employee.toString());
        Msg msg = MSG;
        employeeService.updateEmpById(employee);
        msg.setCode(100);
        msg.setMsg("更新数据成功");
        return msg;
    }
    
    //发生ajax删除联系人
    @RequestMapping(value="/delete/{id}",method=RequestMethod.DELETE)
    @ResponseBody
    public Msg delete(@PathVariable("id")Integer id){
         employeeService.delete(id);
         System.out.println("delete is called:"+id);
        Msg msg = new Msg();
        msg.setCode(100);
        msg.setMsg("删除联系人成功");
        return msg;
    }
}

EmployeeService.java

package com.atguigu.crud.service;

import java.util.List;

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

import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.EmployeeExample;
import com.atguigu.crud.bean.EmployeeExample.Criteria;
import com.atguigu.crud.dao.EmployeeMapper;

@Service
public class EmployeeService {

    @Autowired
    private EmployeeMapper employeeMapper;
    
    public List<Employee> getAll(){
        List<Employee> list = employeeMapper.selectByExampleWithDept(null);
        return list;
    }

    public void save(Employee employee) {
        // TODO Auto-generated method stub
        //这里要注意insert和insertSelevite的区别，使用insert将会null字段插入到数据库中。insertselct不会
        //现在要实现员工的id自增长，employee中的id字段传递过来的值是null字段，所以不能使用insert，会将null字段插入
        employeeMapper.insertSelective(employee);
        
    }

    public Boolean isUserExist(String empName) {
        // TODO Auto-generated method stub
        //采用mybatis的高级查找功能，判断当前用户是否存在
        /***
         * MyBatis的Mapper接口以及Example的实例函数及详解
         * mybatis的逆向工程中会生成实例及实例对应的example，example用于添加条件，相当where后面的部分 
            xxxExample example = new xxxExample(); 
            Criteria criteria = new Example().createCriteria();
            User user = XxxMapper.selectByPrimaryKey(100); //相当于select * from user where id = 100

         * */
        EmployeeExample example = new EmployeeExample();
        Criteria createCriteria = example.createCriteria();
        createCriteria.andEmpNameEqualTo(empName);
        long countByExample = employeeMapper.countByExample(example);
        if(countByExample > 0){
            return true;
        }else{
            return false;
        }
    
    }

    public Employee getEmpById(String id) {
        // TODO Auto-generated method stub
        Employee employee = employeeMapper.selectByPrimaryKey(Integer.parseInt(id));
        return employee;
    }

    
    public void updateEmpById(Employee employee) {
        // TODO Auto-generated method stub
        //这里Employee字段中携带的那些字段的存在值就更新那些字段
        //
        employeeMapper.updateByPrimaryKeySelective(employee);
    }

    public void delete(Integer id) {
        // TODO Auto-generated method stub
        employeeMapper.deleteByPrimaryKey(id);
    }
}

index.jsp

<%@ 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>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
        http://localhost:3306/crud
 -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.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>

  <!-- 修改员工信息的对话框 -->
<div class="modal fade" id="updateEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">修改员工</h4>
      </div>
      <div class="modal-body">
          <!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
         <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                          <p class="form-control-static" id="empNameModalUpdate" name="empName"></p>
                      <span id="name_span_update" class="help-block"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                      <input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil">
                      <span id="email_span_update" class="help-block"></span>
                    </div>
                  </div>
                  
               <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                         <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="F"> 男
                            </label>
                            <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="M"> 女
                            </label>
                    </div>
                  </div>
                  
                   <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-5">
                         <select name="dId" id="dIdModalUpdate"class="form-control">
                         
                    </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 ="saveEmpUpdate">更新</button>
      </div>
    </div>
  </div>
</div>


  <!-- 新增员工信息的对话框 -->
<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新增员工</h4>
      </div>
      <div class="modal-body">
          <!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
         <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                      <input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name">
                      <span id="name_span" class="help-block"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                      <input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil">
                      <span id="email_span" class="help-block"></span>
                    </div>
                  </div>
                  
               <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                         <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="F"> 男
                            </label>
                            <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="M"> 女
                            </label>
                    </div>
                  </div>
                  
                   <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-5">
                         <select name="dId" id="dIdModal"class="form-control">
                         
                    </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 ="saveEmp">保存</button>
      </div>
    </div>
  </div>
</div>

    <!-- 搭建显示页面 -->
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary" id="addEmp">新增</button>
                <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>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                   
                
                </tbody>
                    
                </table>
            </div>
        </div>

        <!-- 显示分页信息 -->
        <div class="row">
            <!--分页文字信息  -->
            <div class="col-md-6" id="page_info_area"></div>
            <!-- 分页条信息 -->
            <div class="col-md-6" id="page_nav_area"></div>
                

        </div>
</div>
     
     <!-- 当页面加载完成之后发起ajax请求获得数据 ，不清楚的看锋利jquery教程相当的经典-->
     <script type="text/javascript">
     
     //定义一个全局变量，获得当前中的记录数
     var total;
     
      //定义一个全局变量，记录当前修改的页面
      var currentPage;
     
     $(function(){
         //页面加载完毕，去首页获得对应的数据
         to_page(1);
        
         });
      
     
     //使用ajax到后台服务器查询数据
     function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn="+pn,
            type:"GET",
            success:function(result){
                //console.log(result);
                //1、解析并显示员工数据
                build_emps_table(result);
                //2、解析并显示分页信息
                build_page_info(result);
                //3、解析显示分页条数据
                build_page_nav(result);
            }
        });
    }
              
     
         
         //解析服务器返回的json数据，并在员工表中显示出来
         function build_emps_table(result){
             //在构建之前先清空所有的数据
             $("#emps_table tbody").empty();
             //第一步：获得所有的员工数据
             var emps = result.extend.pageInfo.list;
             //第二步：对员工数据进行遍历显示出来
             $.each(emps,function(index,item){
                 var empIdTd = $("<td></td>").append(item.empId);
                 var empNameTd = $("<td></td>").append(item.empName);
                 var gender = item.gender == 'M'?"女":"男";
                 var genderTd = $("<td></td>").append(gender);
                 var emailTd = $("<td></td>").append(item.email);
                 var departmentNameTd = $("<td></td>").append(item.department.deptName);
                 //添加编辑按钮
                     var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                     var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");

                    var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                    
                    //这里我们点击编辑按钮的时候，在弹出编辑对话框之前我们要使用ajax到后台去查询对应的员工的信息，这里需要点击编辑按钮的时候，需要得到被修改员工的id，这里设计的比较巧秒，我们在创建出编辑按钮的时候，给编辑按钮添加一个自定义的属性。该属性值就是员工的id

  //               在点击编辑按钮的时候我们就可以通过该属性获得的该员工的id
  
                     editBtn.attr("edit_id",item.empId);
                 //将上面的table表td数据添加到tr中，这里是一个链式操作
                 $("<tr></tr>").append(empIdTd)
                 .append(empNameTd)
                 .append(genderTd)
                 .append(emailTd)
                 .append(departmentNameTd)
                 .append(btnTd)
                 .appendTo("#emps_table tbody");
                 //"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典
                 
                 
             });
             
         }
         
         //解析显示分页信息
         function build_page_info(result){
             $("#page_info_area").empty();
             $("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+"页,"+"总共"+result.extend.pageInfo.pages+"页,"+"总共"+
                     result.extend.pageInfo.total+"条记录");
             total =  result.extend.pageInfo.total;
             currentPage = result.extend.pageInfo.pageNum;
             
         }
         //解析右下角的导航栏
         function build_page_nav(result){
                //page_nav_area
             $("#page_nav_area").empty();
             var ul = $("<ul></ul>").addClass("pagination");            
             //构建元素
             var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
             var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;")); 
             //判断是否有前一页，如果没有前一页就不能点击
             if(result.extend.pageInfo.hasPreviousPage == false){
                 firstPageLi.addClass("disabled");
                 prePageLi.addClass("disabled");
             }
             //给前一页和首页添加按钮点击事件
             firstPageLi.click(function(){
                 to_page(1);
                 
             });
             
             prePageLi.click(function(){
                 //跳转到当前页的前一页
                 to_page(result.extend.pageInfo.pageNum-1);
                 
             });
             
             var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
             var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
             
             //如果没有下一页不能被点击
             if(result.extend.pageInfo.hasNextPage == false){
                 nextPageLi.addClass("disabled");
                 lastPageLi.addClass("disabled");
             }
             
             //给下一页和尾页添加点击事件
             nextPageLi.click(function(){
                 to_page(result.extend.pageInfo.pageNum+1);
             });
             
             lastPageLi.click(function(){
                 to_page(result.extend.pageInfo.pages);
             });
             
             //添加首页和前一页 的提示
             ul.append(firstPageLi).append(prePageLi);
             //1,2，3遍历给ul中添加页码提示
             $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
                 var numLi = $("<li></li>").append($("<a></a>").append(item));
                 //判断当前遍历的如果是当前正在显示的页面，应该高亮显示
                 if(result.extend.pageInfo.pageNum == item){
                     numLi.addClass("active");
                 }
                 //添加点击事件
                 numLi.click(function(){
                     //点击的时候重新使用ajax到服务器查询数据
                     to_page(item);
                 });
                 ul.append(numLi);
             });
             //添加下一页和末页 的提示
             ul.append(nextPageLi).append(lastPageLi);        
             //把ul加入到nav
             var navEle = $("<nav></nav>").append(ul);
             navEle.appendTo("#page_nav_area");
         } 
         
         //点击新增按钮，弹出新增加员工的对话框
         $("#addEmp").click(function(){
             //首先清空页面的所有数据
             //将jquery对象转化成docment对象，调用docment对象的reset方法
             $("#addEmpModal form")[0].reset();
             $("#name_span").text("");
             $("#empNameModal").parent().removeClass("has-success has-error");
             $("#dIdModal").empty();
             
             
             var parent = $("#dIdModal");
             //使用ajax请求部门的数据
             $.ajax(
                     {
                         url:"${APP_PATH}/depts",
                            type:"GET",
                            success:function(result){
                                //对result数据进行解析添加到
                                var depts = result.extend.depts;
                                $.each(depts,function(index,item){
                                    //给option选项设置值应该是deptid
                                    var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
                                    parent.append(opt);
                                });
                            }
                 
                 
                     }
                     );
              //弹出对话框
             $('#addEmpModal').modal({
                 backdrop:'static'                   
             })
         });
         
          //点击保存联系人
           $("#saveEmp").click(function(){
              
              //判断当前的联系人是否可用
               if( $(this).attr("isUserExist")=="yes"){
                   return false;
               }
               
               //首先判断输入的参数是否满足规则
               if(!validate_add_form()){
                   return false;
               } 
               
               
              
               
               $.ajax({
                   url:"${APP_PATH}/save",
                   data:$("#addEmpModal form").serialize(),
                   type:"post",
                   success:function(result){
                       
                       //首先需要判断后端返回的结果中，后端对用户的校验结果
                      //alert(result.extend.err_map.email);
                      //alert(result.extend.err_map.empName);
                      //这里需要注意的是如果邮箱格式错误，姓名正确，result.extend.err_map.email中就像携带错误的信息，result.extend.err_map.empName的信息是undefined
                      
                      if(result.code == 100){
                        //保存联系人成功需要做下面的几件事情
                          //第一件事情就是让新建联系人的对话框摸太框消失
                          $("#addEmpModal").modal('hide');
                          //第二个跳转到最后一页
                          //这里如何跳转到最后一页了，mybatis分页插件这里提供了一个功能，例如现在员工总数是100人，每页显示5人，最大的分页数目就是5，你如果输入6
                          //也是按照最大的5来进行查询。员工的总数肯定是大于最大的分页数目的，现在要查询最后一页的数据，我以员工的总数进行查询
                          //使用ajax重新再查询下最后一页员工的数目
                          //
                          to_page(total);
                      }else{
                          alert(result.extend.err_map.email);
                          //说明邮箱格式错误
                          if(undefined != result.extend.err_map.email){
                              alert(result.extend.err_map.email);
                              $("#emailModal").parent().removeClass("has-success has-error");
                              $("#email_span").text("");
                              $("#emailModal").parent().addClass("has-error");
                             //给span节点添加.help-block属性
                              $("#email_span").addClass("help-block").text(result.extend.err_map.email);
                          }
                          //说明姓名格式有错误
                          if(undefined != result.extend.err_map.empName){
                            //添加元素状态之前。先清空清除当前元素的校验状态
                              $("#empNameModal").parent().removeClass("has-success has-error");
                              $("#name_span").text("");
                             //给当前节点的父元素添加has-error属性
                              $("#empNameModal").parent().addClass("has-error");
                             //给span节点添加.help-block属性
                             $("#name_span").addClass("help-block").text(result.extend.err_map.empName);
                          }
                          
                      }
                     
                      
                       
                       
                       
                   }
               });
               
           });
          
          //juqery前台校验数据
          
        //校验表单数据
        function validate_add_form(){
            //1、拿到要校验的数据，使用正则表达式
            var empName = $("#empNameModal").val();
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            if(!regName.test(empName)){
                //添加元素状态之前。先清空清除当前元素的校验状态
                 $("#empNameModal").parent().removeClass("has-success has-error");
                 $("#name_span").text("");
                //给当前节点的父元素添加has-error属性
                 $("#empNameModal").parent().addClass("has-error");
                //给span节点添加.help-block属性
                $("#name_span").addClass("help-block").text("姓名格式不正确");
                return false;
            }else{
                 $("#empNameModal").parent().removeClass("has-success has-error");
                 $("#name_span").text("");
                //给当前节点的父元素添加has-error属性
                 $("#empNameModal").parent().addClass("has-success");
                //给span节点添加.help-block属性
                $("#name_span").addClass("help-block").text("");
            };
            
            //2、校验邮箱信息
            var email = $("#emailModal").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                 $("#emailModal").parent().removeClass("has-success has-error");
                 $("#email_span").text("");
                 $("#emailModal").parent().addClass("has-error");
                //给span节点添加.help-block属性
                $("#email_span").addClass("help-block").text("邮箱格式不正确");
                return false;
            }else{
                 $("#emailModal").parent().removeClass("has-success has-error");
                 $("#email_span").text("");
                $("#emailModal").parent().addClass("has-success");
                //给span节点添加.help-block属性
                $("#email_span").addClass("help-block").text("");
            }
            return true;
        }
          
           //给输入联系人的input添加change事件，判断当前联系人是否可用
            $("#empNameModal").change(function(){
                //this表示当前操作的对象，是docment类型
                //获得当前输入的name的值
                var name=$(this).val();
                $.ajax({
                    url:"${APP_PATH}/isUserExist",
                    type:"post",
                    data:"empName="+name,
                    success:function(result){
                        if(result.code == 200){
                            //说明该联系人已经在后台存在不可以
                            //添加元素状态之前。先清空清除当前元素的校验状态
                            $("#empNameModal").parent().removeClass("has-success has-error");
                            $("#name_span").text("");
                           //给当前节点的父元素添加has-error属性
                            $("#empNameModal").parent().addClass("has-error");
                           //给span节点添加.help-block属性
                           $("#name_span").addClass("help-block").text("该联系人已经存在");
                       
                           //如果当前联系人已经存在，点击保存联系人案例的时候，就会失败，我们给保存联系人的按钮添加一个自定义属性用来标识当前添加的联系人是否存在
                            $("#saveEmp").attr("isUserExist","yes");
                        }else{
                            
                            //说明该联系人可用
                             $("#empNameModal").parent().removeClass("has-success has-error");
                             $("#name_span").text("");
                            //给当前节点的父元素添加has-error属性
                             $("#empNameModal").parent().addClass("has-success");
                            //给span节点添加.help-block属性
                            $("#name_span").addClass("help-block").text("该联系人可用");
                             $("#saveEmp").attr("isUserExist","no");
                            
                        }
                        
                    }
                    
                    
                });
            });
         
           //给编辑按钮添加点击事件
           $(document).on("click",".edit_btn",function(){
         
               
               //弹出模态对话框
               //首先清空页面的所有数据
             //将jquery对象转化成docment对象，调用docment对象的reset方法
             $("#updateEmpModal form")[0].reset();
             $("#name_span_update").text("");
             $("#email_span_update").text("");
             $("#empNameModalUpdate").parent().removeClass("has-success has-error");
             $("#emailModalUpdate").parent().removeClass("has-success has-error");
             $("#dIdModalUpdate").empty();
             //发送ajax请求获得对应的部门信息
              
             var parent = $("#dIdModalUpdate");
             //使用ajax请求部门的数据
             $.ajax(
                     {
                         url:"${APP_PATH}/depts",
                            type:"GET",
                            success:function(result){
                                //对result数据进行解析添加到
                                var depts = result.extend.depts;
                                $.each(depts,function(index,item){
                                    //给option选项设置值应该是deptid
                                    var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
                                    parent.append(opt);
                                });
                            }
                 
                 
                     }
                     );
             
               //使用ajax请求获得对应的员工信息
                         var emp_id = $(this).attr("edit_id");     
               
                         //给编辑联系人的对话框中国的更新按钮添加自定义属性，这样在编辑联系人页面中就可以获得被编辑联系人的id
                         $("#saveEmpUpdate").attr("edit_id",emp_id);
                          $.ajax(
                         {
   
                          url:"${APP_PATH}/emp/"+emp_id,
                            type:"GET",
                            success:function(result){
                                //在对话框中显示显示姓名 p标签是一个文本使用text
                                $("#empNameModalUpdate").text(result.extend.emp.empName);
                                //给邮箱复制，input对话框使用val
                                $("#emailModalUpdate").val(result.extend.emp.email);
                                //接下来要让该联系人对应的性别被选中，如何实现了
                                 //首先找到id为updateEmpModal对话框下的name等于gender的input元素。这个元素就是单选框。val中传入的值就是男就是对应的
                                 //男的单选框被选中
                                $("#updateEmpModal input[name=gender]").val([result.extend.emp.gender]);
                                $("#updateEmpModal select").val([result.extend.emp.dId]);
                            }
                 
                 
                     }
                     );
             
              //弹出对话框
             $('#updateEmpModal').modal({
                 backdrop:'static'                   
             })
             
           });
           
           
           //给编辑联系人的保存按钮增加点击事件
           $("#saveEmpUpdate").click(function(){
               
               //使用ajax提交数据到后台更新数据这里需要
               //强调的是我们采用的是put方式的提交
               // data:$("#addEmpModal form").serialize()传递的请求参数中必须携带一个_method
               var emp_id = $(this).attr("edit_id");
       
               $.ajax({
                   url:"${APP_PATH}/update/"+emp_id,                  
                    type:"PUT",
                    data:$("#updateEmpModal form").serialize(),
                  success:function(result){
                     //修改联系人成功之后，关闭修改联系人的摸态对话框
                     if(result.code == 100){
                         $("#updateEmpModal").modal('hide');
                         //跳转到当前的修改页面
                         to_page(currentPage);
                     }
                  }
               });
               
           });
           
           
            //接下来实现删除操作，给删除按钮添加点击事件
            //给编辑按钮添加点击事件
           $(document).on("click",".delete_btn",function(){
               //首先需要获得要删除的联系人的姓名如何获得了,主要这里不能写成parent，暂时还没有弄明白
               //alert($(this).parents("tr").find("td:eq(1)").text());
               //删除联系人的id
               var delete_id = $(this).parents("tr").find("td:eq(0)").text();
               //弹出确认对话框
               if(confirm("你确认删除"+$(this).parents("tr").find("td:eq(1)").text()+"吗?")){
                   //发生ajax删除联系人
                   $.ajax({
                       url:"${APP_PATH}/delete/"+ delete_id,
                       type:"DELETE",
                       success:function(result){
                         if(result.code == 100){
                             //说明删除联系人成功
                             //重新ajax请求到删除联系人的页面
                             to_page(currentPage);
                             
                         }
                           
                       }
                       
                       
                       
                   });
                   
               }
           });
     </script>
        
    </div>
</body>
</html>

通过上面的操作就达到了点击删除按钮单一删除联系人的目的

33、尚硅谷_SSM高级整合_删除_全选&全不选.avi

上面我们实现了单一删除，我们要实现全选删除如何实现了

要实现上面的全选操作，应该注意到页面是如何实现了，第一在表头应该添加一个checkbox，如果勾选中表头的checkbox可以让每个子选项下的checkbox从未选中状态变到选中状态，或者从选中状态变成

未选中状态

 <tr>
                       <!-- 在表头添加checkbox -->
                       <input type="checkbox" id="check_all"/>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
添加之后效果如下所示：

第二：每一行元素开头都也应该有一个checkbox

 $.each(emps,function(index,item){
                 //给每一行表记录都添加一个checkbox
                 var checkboxTd = $("<input type='checkbox' class='check_item'/>");
                 var empIdTd = $("<td></td>").append(item.empId);
                 var empNameTd = $("<td></td>").append(item.empName);
                 var gender = item.gender == 'M'?"女":"男";
                 var genderTd = $("<td></td>").append(gender);
                 var emailTd = $("<td></td>").append(item.email);
                 var departmentNameTd = $("<td></td>").append(item.department.deptName);
                 //添加编辑按钮
                     var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                     var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");

                    var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                    
                    //这里我们点击编辑按钮的时候，在弹出编辑对话框之前我们要使用ajax到后台去查询对应的员工的信息，这里需要点击编辑按钮的时候，需要得到被修改员工的id，这里设计的比较巧秒，我们在创建出编辑按钮的时候，给编辑按钮添加一个自定义的属性。该属性值就是员工的id

  //               在点击编辑按钮的时候我们就可以通过该属性获得的该员工的id
  
                     editBtn.attr("edit_id",item.empId);
                 //将上面的table表td数据添加到tr中，这里是一个链式操作
                 $("<tr></tr>").append(checkboxTd)
                  .append(empIdTd)
                 .append(empNameTd)
                 .append(genderTd)
                 .append(emailTd)
                 .append(departmentNameTd)
                 .append(btnTd)
                 .appendTo("#emps_table tbody");
                 //"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典
                 
                 
             });

 添加之后运行的效果如下所示：

我们接下来我们来实现全选和全不选的操作

当点击表头的checkbox的时候，我们应该首先获得该checkbox的选中状态，然后让每一行的checkbox的状态和表头的checkbox的状态一致，这样就达到了全选和全不选的目的

获取状态的时候如果要注意如果使用下面的代码

 //实现表头checkbox全选和全不选的操作
           $("#check_all").click(function(){
               //获得该表头checkbox的状态
               alert($(this).attr("checked"));
               
           });

运行的结果始终是

这里要注意使用attr获得属性值主要是用来获得自定义的属性值，而要获得固有的属性值要使用prop

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

 使用prop选中的值是true，为选中为false

 //实现表头checkbox全选和全不选的操作
           $("#check_all").click(function(){
               //获得该表头checkbox的状态
               var status = $(this).prop("checked");
               //让每一行的checkbox的状态等于表头checkbox的状态
               $(".check_item").prop("checked",status);
               
           });

这样我们就实现了全选和全不选的功能

接下来我们要实现下面的功能

如果表头的checbox处于未选中的状态，但是当每一行的checkbox都选中之后，我们要让表头的checkbox也处于选中状态，当表头的checkbox处于选中状态之后，如果有一行checkbox处于未选中

状态我们都要让表头处于未选中状态

那么我们应该给每一行的checkbox设置监听状态，但点击的时候判断当前页面被选中的checkbox的数目时候等于当前页面每页显示的数目，如何是就让表头的checkbox处于选中状态，否则就设置为未选中状态

 $(document).on("click",".check_item",function(){
               
               //第一步获得被选中的checkbox的长度
               var checked_length = $(".check_item:checked").length;
               //获得当前页面中全不的checkbox的长度
               var total_length = $(".check_item").length;
               
               //如果二二者长度相等说明当前的所有的checkbox都处于选中状态，此时
               //要让表头的checkbox处于选中状态
               if(checked_length == total_length){
                   $("#check_all").prop("checked",true);
               }else{
                   $("#check_all").prop("checked",false);
               }
               
           });

我们来看总的页面的代码

index.jsp

<%@ 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>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
        http://localhost:3306/crud
 -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.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>

  <!-- 修改员工信息的对话框 -->
<div class="modal fade" id="updateEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">修改员工</h4>
      </div>
      <div class="modal-body">
          <!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
         <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                          <p class="form-control-static" id="empNameModalUpdate" name="empName"></p>
                      <span id="name_span_update" class="help-block"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                      <input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil">
                      <span id="email_span_update" class="help-block"></span>
                    </div>
                  </div>
                  
               <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                         <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="F"> 男
                            </label>
                            <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="M"> 女
                            </label>
                    </div>
                  </div>
                  
                   <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-5">
                         <select name="dId" id="dIdModalUpdate"class="form-control">
                         
                    </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 ="saveEmpUpdate">更新</button>
      </div>
    </div>
  </div>
</div>


  <!-- 新增员工信息的对话框 -->
<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新增员工</h4>
      </div>
      <div class="modal-body">
          <!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
         <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                      <input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name">
                      <span id="name_span" class="help-block"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                      <input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil">
                      <span id="email_span" class="help-block"></span>
                    </div>
                  </div>
                  
               <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                         <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="F"> 男
                            </label>
                            <label class="radio-inline">
                              <input type="radio" name="gender" id="genderModal" value="M"> 女
                            </label>
                    </div>
                  </div>
                  
                   <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-5">
                         <select name="dId" id="dIdModal"class="form-control">
                         
                    </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 ="saveEmp">保存</button>
      </div>
    </div>
  </div>
</div>

    <!-- 搭建显示页面 -->
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary" id="addEmp">新增</button>
                <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>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                   
                
                </tbody>
                    
                </table>
            </div>
        </div>

        <!-- 显示分页信息 -->
        <div class="row">
            <!--分页文字信息  -->
            <div class="col-md-6" id="page_info_area"></div>
            <!-- 分页条信息 -->
            <div class="col-md-6" id="page_nav_area"></div>
                

        </div>
</div>
     
     <!-- 当页面加载完成之后发起ajax请求获得数据 ，不清楚的看锋利jquery教程相当的经典-->
     <script type="text/javascript">
     
     //定义一个全局变量，获得当前中的记录数
     var total;
     
      //定义一个全局变量，记录当前修改的页面
      var currentPage;
     
     $(function(){
         //页面加载完毕，去首页获得对应的数据
         to_page(1);
        
         });
      
     
     //使用ajax到后台服务器查询数据
     function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn="+pn,
            type:"GET",
            success:function(result){
                //console.log(result);
                //1、解析并显示员工数据
                build_emps_table(result);
                //2、解析并显示分页信息
                build_page_info(result);
                //3、解析显示分页条数据
                build_page_nav(result);
            }
        });
    }
              
     
         
         //解析服务器返回的json数据，并在员工表中显示出来
         function build_emps_table(result){
             //在构建之前先清空所有的数据
             $("#emps_table tbody").empty();
             //第一步：获得所有的员工数据
             var emps = result.extend.pageInfo.list;
             //第二步：对员工数据进行遍历显示出来
             $.each(emps,function(index,item){
                 //给每一行表记录都添加一个checkbox
                 var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                 var empIdTd = $("<td></td>").append(item.empId);
                 var empNameTd = $("<td></td>").append(item.empName);
                 var gender = item.gender == 'M'?"女":"男";
                 var genderTd = $("<td></td>").append(gender);
                 var emailTd = $("<td></td>").append(item.email);
                 var departmentNameTd = $("<td></td>").append(item.department.deptName);
                 //添加编辑按钮
                     var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                     var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");

                    var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                    
                    //这里我们点击编辑按钮的时候，在弹出编辑对话框之前我们要使用ajax到后台去查询对应的员工的信息，这里需要点击编辑按钮的时候，需要得到被修改员工的id，这里设计的比较巧秒，我们在创建出编辑按钮的时候，给编辑按钮添加一个自定义的属性。该属性值就是员工的id

  //               在点击编辑按钮的时候我们就可以通过该属性获得的该员工的id
  
                     editBtn.attr("edit_id",item.empId);
                 //将上面的table表td数据添加到tr中，这里是一个链式操作
                 $("<tr></tr>").append(checkboxTd)
                  .append(empIdTd)
                 .append(empNameTd)
                 .append(genderTd)
                 .append(emailTd)
                 .append(departmentNameTd)
                 .append(btnTd)
                 .appendTo("#emps_table tbody");
                 //"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典
                 
                 
             });
             
         }
         
         //解析显示分页信息
         function build_page_info(result){
             $("#page_info_area").empty();
             $("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+"页,"+"总共"+result.extend.pageInfo.pages+"页,"+"总共"+
                     result.extend.pageInfo.total+"条记录");
             total =  result.extend.pageInfo.total;
             currentPage = result.extend.pageInfo.pageNum;
             
         }
         //解析右下角的导航栏
         function build_page_nav(result){
                //page_nav_area
             $("#page_nav_area").empty();
             var ul = $("<ul></ul>").addClass("pagination");            
             //构建元素
             var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
             var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;")); 
             //判断是否有前一页，如果没有前一页就不能点击
             if(result.extend.pageInfo.hasPreviousPage == false){
                 firstPageLi.addClass("disabled");
                 prePageLi.addClass("disabled");
             }
             //给前一页和首页添加按钮点击事件
             firstPageLi.click(function(){
                 to_page(1);
                 
             });
             
             prePageLi.click(function(){
                 //跳转到当前页的前一页
                 to_page(result.extend.pageInfo.pageNum-1);
                 
             });
             
             var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
             var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
             
             //如果没有下一页不能被点击
             if(result.extend.pageInfo.hasNextPage == false){
                 nextPageLi.addClass("disabled");
                 lastPageLi.addClass("disabled");
             }
             
             //给下一页和尾页添加点击事件
             nextPageLi.click(function(){
                 to_page(result.extend.pageInfo.pageNum+1);
             });
             
             lastPageLi.click(function(){
                 to_page(result.extend.pageInfo.pages);
             });
             
             //添加首页和前一页 的提示
             ul.append(firstPageLi).append(prePageLi);
             //1,2，3遍历给ul中添加页码提示
             $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
                 var numLi = $("<li></li>").append($("<a></a>").append(item));
                 //判断当前遍历的如果是当前正在显示的页面，应该高亮显示
                 if(result.extend.pageInfo.pageNum == item){
                     numLi.addClass("active");
                 }
                 //添加点击事件
                 numLi.click(function(){
                     //点击的时候重新使用ajax到服务器查询数据
                     to_page(item);
                 });
                 ul.append(numLi);
             });
             //添加下一页和末页 的提示
             ul.append(nextPageLi).append(lastPageLi);        
             //把ul加入到nav
             var navEle = $("<nav></nav>").append(ul);
             navEle.appendTo("#page_nav_area");
         } 
         
         //点击新增按钮，弹出新增加员工的对话框
         $("#addEmp").click(function(){
             //首先清空页面的所有数据
             //将jquery对象转化成docment对象，调用docment对象的reset方法
             $("#addEmpModal form")[0].reset();
             $("#name_span").text("");
             $("#empNameModal").parent().removeClass("has-success has-error");
             $("#dIdModal").empty();
             
             
             var parent = $("#dIdModal");
             //使用ajax请求部门的数据
             $.ajax(
                     {
                         url:"${APP_PATH}/depts",
                            type:"GET",
                            success:function(result){
                                //对result数据进行解析添加到
                                var depts = result.extend.depts;
                                $.each(depts,function(index,item){
                                    //给option选项设置值应该是deptid
                                    var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
                                    parent.append(opt);
                                });
                            }
                 
                 
                     }
                     );
              //弹出对话框
             $('#addEmpModal').modal({
                 backdrop:'static'                   
             })
         });
         
          //点击保存联系人
           $("#saveEmp").click(function(){
              
              //判断当前的联系人是否可用
               if( $(this).attr("isUserExist")=="yes"){
                   return false;
               }
               
               //首先判断输入的参数是否满足规则
               if(!validate_add_form()){
                   return false;
               } 
               
               
              
               
               $.ajax({
                   url:"${APP_PATH}/save",
                   data:$("#addEmpModal form").serialize(),
                   type:"post",
                   success:function(result){
                       
                       //首先需要判断后端返回的结果中，后端对用户的校验结果
                      //alert(result.extend.err_map.email);
                      //alert(result.extend.err_map.empName);
                      //这里需要注意的是如果邮箱格式错误，姓名正确，result.extend.err_map.email中就像携带错误的信息，result.extend.err_map.empName的信息是undefined
                      
                      if(result.code == 100){
                        //保存联系人成功需要做下面的几件事情
                          //第一件事情就是让新建联系人的对话框摸太框消失
                          $("#addEmpModal").modal('hide');
                          //第二个跳转到最后一页
                          //这里如何跳转到最后一页了，mybatis分页插件这里提供了一个功能，例如现在员工总数是100人，每页显示5人，最大的分页数目就是5，你如果输入6
                          //也是按照最大的5来进行查询。员工的总数肯定是大于最大的分页数目的，现在要查询最后一页的数据，我以员工的总数进行查询
                          //使用ajax重新再查询下最后一页员工的数目
                          //
                          to_page(total);
                      }else{
                          alert(result.extend.err_map.email);
                          //说明邮箱格式错误
                          if(undefined != result.extend.err_map.email){
                              alert(result.extend.err_map.email);
                              $("#emailModal").parent().removeClass("has-success has-error");
                              $("#email_span").text("");
                              $("#emailModal").parent().addClass("has-error");
                             //给span节点添加.help-block属性
                              $("#email_span").addClass("help-block").text(result.extend.err_map.email);
                          }
                          //说明姓名格式有错误
                          if(undefined != result.extend.err_map.empName){
                            //添加元素状态之前。先清空清除当前元素的校验状态
                              $("#empNameModal").parent().removeClass("has-success has-error");
                              $("#name_span").text("");
                             //给当前节点的父元素添加has-error属性
                              $("#empNameModal").parent().addClass("has-error");
                             //给span节点添加.help-block属性
                             $("#name_span").addClass("help-block").text(result.extend.err_map.empName);
                          }
                          
                      }
                     
                      
                       
                       
                       
                   }
               });
               
           });
          
          //juqery前台校验数据
          
        //校验表单数据
        function validate_add_form(){
            //1、拿到要校验的数据，使用正则表达式
            var empName = $("#empNameModal").val();
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            if(!regName.test(empName)){
                //添加元素状态之前。先清空清除当前元素的校验状态
                 $("#empNameModal").parent().removeClass("has-success has-error");
                 $("#name_span").text("");
                //给当前节点的父元素添加has-error属性
                 $("#empNameModal").parent().addClass("has-error");
                //给span节点添加.help-block属性
                $("#name_span").addClass("help-block").text("姓名格式不正确");
                return false;
            }else{
                 $("#empNameModal").parent().removeClass("has-success has-error");
                 $("#name_span").text("");
                //给当前节点的父元素添加has-error属性
                 $("#empNameModal").parent().addClass("has-success");
                //给span节点添加.help-block属性
                $("#name_span").addClass("help-block").text("");
            };
            
            //2、校验邮箱信息
            var email = $("#emailModal").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                 $("#emailModal").parent().removeClass("has-success has-error");
                 $("#email_span").text("");
                 $("#emailModal").parent().addClass("has-error");
                //给span节点添加.help-block属性
                $("#email_span").addClass("help-block").text("邮箱格式不正确");
                return false;
            }else{
                 $("#emailModal").parent().removeClass("has-success has-error");
                 $("#email_span").text("");
                $("#emailModal").parent().addClass("has-success");
                //给span节点添加.help-block属性
                $("#email_span").addClass("help-block").text("");
            }
            return true;
        }
          
           //给输入联系人的input添加change事件，判断当前联系人是否可用
            $("#empNameModal").change(function(){
                //this表示当前操作的对象，是docment类型
                //获得当前输入的name的值
                var name=$(this).val();
                $.ajax({
                    url:"${APP_PATH}/isUserExist",
                    type:"post",
                    data:"empName="+name,
                    success:function(result){
                        if(result.code == 200){
                            //说明该联系人已经在后台存在不可以
                            //添加元素状态之前。先清空清除当前元素的校验状态
                            $("#empNameModal").parent().removeClass("has-success has-error");
                            $("#name_span").text("");
                           //给当前节点的父元素添加has-error属性
                            $("#empNameModal").parent().addClass("has-error");
                           //给span节点添加.help-block属性
                           $("#name_span").addClass("help-block").text("该联系人已经存在");
                       
                           //如果当前联系人已经存在，点击保存联系人案例的时候，就会失败，我们给保存联系人的按钮添加一个自定义属性用来标识当前添加的联系人是否存在
                            $("#saveEmp").attr("isUserExist","yes");
                        }else{
                            
                            //说明该联系人可用
                             $("#empNameModal").parent().removeClass("has-success has-error");
                             $("#name_span").text("");
                            //给当前节点的父元素添加has-error属性
                             $("#empNameModal").parent().addClass("has-success");
                            //给span节点添加.help-block属性
                            $("#name_span").addClass("help-block").text("该联系人可用");
                             $("#saveEmp").attr("isUserExist","no");
                            
                        }
                        
                    }
                    
                    
                });
            });
         
           //给编辑按钮添加点击事件
           $(document).on("click",".edit_btn",function(){
         
               
               //弹出模态对话框
               //首先清空页面的所有数据
             //将jquery对象转化成docment对象，调用docment对象的reset方法
             $("#updateEmpModal form")[0].reset();
             $("#name_span_update").text("");
             $("#email_span_update").text("");
             $("#empNameModalUpdate").parent().removeClass("has-success has-error");
             $("#emailModalUpdate").parent().removeClass("has-success has-error");
             $("#dIdModalUpdate").empty();
             //发送ajax请求获得对应的部门信息
              
             var parent = $("#dIdModalUpdate");
             //使用ajax请求部门的数据
             $.ajax(
                     {
                         url:"${APP_PATH}/depts",
                            type:"GET",
                            success:function(result){
                                //对result数据进行解析添加到
                                var depts = result.extend.depts;
                                $.each(depts,function(index,item){
                                    //给option选项设置值应该是deptid
                                    var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
                                    parent.append(opt);
                                });
                            }
                 
                 
                     }
                     );
             
               //使用ajax请求获得对应的员工信息
                         var emp_id = $(this).attr("edit_id");     
               
                         //给编辑联系人的对话框中国的更新按钮添加自定义属性，这样在编辑联系人页面中就可以获得被编辑联系人的id
                         $("#saveEmpUpdate").attr("edit_id",emp_id);
                          $.ajax(
                         {
   
                          url:"${APP_PATH}/emp/"+emp_id,
                            type:"GET",
                            success:function(result){
                                //在对话框中显示显示姓名 p标签是一个文本使用text
                                $("#empNameModalUpdate").text(result.extend.emp.empName);
                                //给邮箱复制，input对话框使用val
                                $("#emailModalUpdate").val(result.extend.emp.email);
                                //接下来要让该联系人对应的性别被选中，如何实现了
                                 //首先找到id为updateEmpModal对话框下的name等于gender的input元素。这个元素就是单选框。val中传入的值就是男就是对应的
                                 //男的单选框被选中
                                $("#updateEmpModal input[name=gender]").val([result.extend.emp.gender]);
                                $("#updateEmpModal select").val([result.extend.emp.dId]);
                            }
                 
                 
                     }
                     );
             
              //弹出对话框
             $('#updateEmpModal').modal({
                 backdrop:'static'                   
             })
             
           });
           
           
           //给编辑联系人的保存按钮增加点击事件
           $("#saveEmpUpdate").click(function(){
               
               //使用ajax提交数据到后台更新数据这里需要
               //强调的是我们采用的是put方式的提交
               // data:$("#addEmpModal form").serialize()传递的请求参数中必须携带一个_method
               var emp_id = $(this).attr("edit_id");
       
               $.ajax({
                   url:"${APP_PATH}/update/"+emp_id,                  
                    type:"PUT",
                    data:$("#updateEmpModal form").serialize(),
                  success:function(result){
                     //修改联系人成功之后，关闭修改联系人的摸态对话框
                     if(result.code == 100){
                         $("#updateEmpModal").modal('hide');
                         //跳转到当前的修改页面
                         to_page(currentPage);
                     }
                  }
               });
               
           });
           
           
            //接下来实现删除操作，给删除按钮添加点击事件
            //给编辑按钮添加点击事件
           $(document).on("click",".delete_btn",function(){
               //首先需要获得要删除的联系人的姓名如何获得了,主要这里不能写成parent，暂时还没有弄明白
               //alert($(this).parents("tr").find("td:eq(1)").text());
               //删除联系人的id
               var delete_id = $(this).parents("tr").find("td:eq(0)").text();
               //弹出确认对话框
               if(confirm("你确认删除"+$(this).parents("tr").find("td:eq(1)").text()+"吗?")){
                   //发生ajax删除联系人
                   $.ajax({
                       url:"${APP_PATH}/delete/"+ delete_id,
                       type:"DELETE",
                       success:function(result){
                         if(result.code == 100){
                             //说明删除联系人成功
                             //重新ajax请求到删除联系人的页面
                             to_page(currentPage);
                             
                         }
                           
                       }
                       
                       
                       
                   });
                   
               }
           });
            
           //实现表头checkbox全选和全不选的操作
           $("#check_all").click(function(){
               //获得该表头checkbox的状态
               var status = $(this).prop("checked");
               //让每一行的checkbox的状态等于表头checkbox的状态
               $(".check_item").prop("checked",status);
               
           });
           
           //给每一行的checkbox设置监听事件
           //接下来我们要实现下面的功能

        //如果表头的checbox处于未选中的状态，
//但是当每一行的checkbox都选中之后，我们要让表头的checkbox也处于选中状态，当表头的checkbox处于选中状态之后，如果有一行checkbox处于未选中

//状态我们都要让表头处于未选中状态

//那么我们应该给每一行的checkbox设置监听状态，但点击的时候判断当前页面被选中的checkbox的数目时候等于当前页面每页显示的数目，如何是就让表头的checkbox处于选中状态，否则就设置为未选中状态
           $(document).on("click",".check_item",function(){
               
               //第一步获得被选中的checkbox的长度
               var checked_length = $(".check_item:checked").length;
               //获得当前页面中全不的checkbox的长度
               var total_length = $(".check_item").length;
               
               //如果二二者长度相等说明当前的所有的checkbox都处于选中状态，此时
               //要让表头的checkbox处于选中状态
               if(checked_length == total_length){
                   $("#check_all").prop("checked",true);
               }else{
                   $("#check_all").prop("checked",false);
               }
               
           });

     </script>
        
    </div>
</body>
</html>