SSM练手-增删改查-7删除员工信息

7 删除员工信息

一 单个删除

操作步骤：

1 点击每行对应的删除按钮，会弹出确定删除【XXX】信息的提示框；

2 发送Ajax请求到后台去处理，删除员工信息；

3 提示删除成功，返回当前页。

后台代码：

    /**
     * 删除单个员工信息
     * @param empId
     * @return
     */
    @RequestMapping(value ="emp/deleteEmp/{empId}", method = {RequestMethod.DELETE})
    @ResponseBody
    public Msg deleteEmp(@PathVariable("empId") Integer empId){
        int result = 0;
        if (empId > 0){
            result = employeeService.deleteEmployeeByEmpId(empId);
        }
        if (result <= 0){
            return Msg.fail().add("delete-error", "删除异常");
        }
        return Msg.success();
    }

前端：

 /**
         * 单个删除
         * 1 点击删除按钮，弹出是否确认删除[XXXX]的对话框
         * 2 获取要删除的id，发送Ajax请求到后台进行删除
         */
        $(document).on("click", ".delete_btn", function () {
            var empName = $(this).parents("tr").find("td:eq(1)").text();
            var empId = $(this).attr("delete-id");
            if (confirm("确认删除【"+ empName + "】的信息吗?")){
                $.ajax({
                    url :"${APP_PATH}/emp/deleteEmp/ " + empId,
                    type : "DELETE",
                    success : function (result) {
                        if (result.code == 100){
                            alert("删除成功！");
                            //回到本页面
                            to_page(currentPage);
                        } else {
                            alert("删除异常");
                        }

                    }
                });
            }
        });

 

 

二、批量删除

后台代码：

1 EmployeeService.java

    /**
     * 批量删除
     * @param idList
     * @return
     */
    public int deleteEmpBatch(List<Integer> idList) {
        EmployeeExample example = new EmployeeExample();
        Criteria criteria = example.createCriteria();
        //delete from xxx where emp_id in(1,2,3)
        criteria.andEmpIdIn(idList);
        return employeeMapper.deleteByExample(example);
    }

2 EmployeeController.java:

    /**
     * 删除单个员工信息/批量删除
     * @param
     * @return
     */
    @RequestMapping(value ="emp/deleteEmp/{ids}", method = {RequestMethod.DELETE})
    @ResponseBody
    public Msg deleteEmp(@PathVariable("ids") String ids){

        //含有"-"，表示批量删除
        if (ids.contains("-")){
            List<Integer> idList = new ArrayList<>();
            String[]  splitIds = ids.split("-");
            for (String id : splitIds){
                idList.add(Integer.parseInt(id));
            }
            int result = employeeService.deleteEmpBatch(idList);
            if (result < 0){
                return Msg.fail().add("delete-error", "批量删除异常");
            }
        }else {
            Integer empId = Integer.parseInt(ids);
            int result = 0;
            if (empId > 0){
                result = employeeService.deleteEmployeeByEmpId(empId);
            }
            if (result < 0){
                return Msg.fail().add("delete-error", "单个删除异常");
            }
        }

        return Msg.success();
    }

 

前端：

1 全选/全不选操作：

1) 点击全选，则下面所有选项被选中
2) 再次点击全选，则下面所有选项被取消
3) 若当前页所有选项被选中，则全选框也自动被选中
4) 若当前页所有选项没有全被选中，则全选框也被取消

        /**
         * 全选全部选:
         * 1 点击全选，则下面所有选项被选中
         * 2 再次点击全选，则下面所有选项被取消
         * 3 若当前页所有选项被选中，则全选框也自动被选中
         * 4 若当前页所有选项没有全被选中，则全选框也被取消
         */
        // 点击全选
        $("#check_all").click(function () {
            alert($(this).prop("checked"));
            //prop:为DOM原生属性赋值
            //attr: 为自定义属性赋值
            //获取全选/全不选操作属性。全选：true；全部选：false
            var flag = $(this).prop("checked");
            //flag为true的时候即为全选，下面每行都点击上；反之全不选
            $(".check_item").prop("checked", flag);
        });
        //单个点击
        $(document).on("click", ".check_item", function () {
            //判断当前选择的元素是否是整个元素的个数,是即为全选
            var flag = $(".check_item:checked").length == $(".check_item").length;
            $("#check_all").prop("checked", flag);
        });

2 批量删除：

1) 点击批量删除，弹出是否删除【XXX,XXX,XXX】的提示信息
2) 获取选择要删除的id
3) 发送Ajax请求到后台去处理
4) 提示删除成功，返回当前页面

        /**
         * 批量删除
         * 1 点击批量删除，弹出是否删除【XXX,XXX,XXX】的提示信息
         * 2 获取选择要删除的id
         * 3 发送Ajax请求到后台去处理
         * 4 提示删除成功，返回当前页面
         */
        $("#emp_deleteAll_btn").click(function(){
            var del_empNames = "";
            var del_empIds = "";
            $.each($(".check_item:checked"), function () {
                del_empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
                del_empIds += $(this).parents("tr").find("td:eq(1)").text()+"-";
            });
            //去除del_empNames，del_empIds
            del_empNames = del_empNames.substring(0, del_empNames.length - 1);
            del_empIds = del_empIds.substring(0, del_empIds.length - 1);

            if(confirm("确定要删除【" + del_empNames + "】的信息吗？")){
                $.ajax({
                    url : "${APP_PATH}/emp/deleteEmp/" + del_empIds,
                    type : "DELETE",
                    success : function (result) {
                        if (result.code == 100){
                            alert("批量删除成功");
                            to_page(currentPage);
                        } else{
                            alert("批量删除异常");
                        }
                    }
                });
            }
        });

 

效果如图：

 

所有代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>员工信息显示</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <script type="text/javascript"
            src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
    <link
            href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
            rel="stylesheet">
    <script
            src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>

    <!--修改员工Modal框-->
    <div class="modal fade" id="Emp_Update_Modal" tabindex="-1" role="dialog" aria-labelledby="emp_update_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="emp_update_modal_label">修改员工</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="emp_update_form">
                        <div class="form-group">
                            <label for="empName" class="col-sm-2 control-label">empName:</label>
                            <div class="col-sm-10">
                                <p class="form-control-static" id="empName_update_static"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">email:</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name="eamil" id="email_update" placeholder="email">
                                <span id="edit_helpBlock2" class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">gender:</label>
                            <div class="col-sm-offset-2 col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1__update_input" checked="checked" value="M"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2__update_input" value="F"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">deptName:</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="dId" id="deptName_select_update">
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
                </div>
            </div>
        </div>
    </div>

    <!--新增员工Model框-->
    <div class="modal fade" id="Emp_Add_Modal" tabindex="-1" role="dialog" aria-labelledby="emp_add_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="emp_add_modal_label">新增员工</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="emp_add_form">
                        <div class="form-group">
                            <label for="empName" class="col-sm-2 control-label">empName:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="empName" id="empName" placeholder="empName">
                                <span id="helpBlock11" class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">email:</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name="eamil" id="email" placeholder="email">
                                <span id="helpBlock22" class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">gender:</label>
                            <div class="col-sm-offset-2 col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1_input" checked="checked" value="M"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_input" value="F"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">deptName:</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="dId" id="deptName_select">
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!--显示页面-->
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-4">
                <h1>SSM练手项目-CRUD</h1>
            </div>
        </div>
        <!-- 操作按钮 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary" id="emp_add_btn" data-toggle="modal" data-target="#Emp_Add_Modal">新增</button>
                <button class="btn btn-danger" id="emp_deleteAll_btn">批量删除</button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_table">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="check_all"></th>
                            <th>#</th>
                            <th>empName</th>
                            <th>email</th>
                            <th>gender</th>
                            <th>deptName</th>
                            <th>Option</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

        <!-- 分页信息 -->
        <div class="row">
            <div class="col-md-6" id="page_info">

            </div>

            <div class="col-md-6" id="nav_pagination_info">

            </div>
        </div>

    </div>

    <script type="text/javascript">
        //全局变量，保存总记录数和当前页数
        var totalRecord, currentPage;

        $(function(){
            //默认去首页
            to_page(1);
        })
        
        function to_page(pageNo) {
            $.ajax({
                url:"${APP_PATH}/emp/list2",
                data:"pageNo="+pageNo,
                type:"GET",
                success:function (result) {
                    console.log(result);
                    //1、解析并显示员工数据
                    build_emps_table(result);
                    //2、解析并显示分页信息
                    build_page_info(result);
                    //3、解析显示分页条数据
                    build_page_nav(result);
                }
            });
        }
        
        function build_emps_table(result) {
            //清空表格
            $("#emps_table tbody").empty();
            var emps = result.extendInfo.pageInfo.list;
            $.each(emps, function (index, item) {
                var checkBoxItemTd = $("<td></td>").append("<input type='checkbox' class='check_item'>");
                var empIdTd = $("<td></td>").append(item.empId);
                var empNameTd = $("<td></td>").append(item.empName);
                var emailTd = $("<td></td>").append(item.eamil);
                var genderId = $("<td></td>").append(item.gender=="M"?"男":"女");
                var deptNameTd = $("<td></td>").append(item.department.deptName);
                var editBtn = $("<button></button>").addClass("btn btn-info btn-sm edit_btn")
                                                    .append( $("<span></span>").addClass("glyphicon glyphicon-pencil")

                                                            .append("编辑"));
                //修改的时候 ，获取点击的员工的id
                editBtn.attr("edit-id", item.empId);

                var deleteBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append( $("<span></span>").addClass("glyphicon glyphicon-trash")
                        .append("删除"));
                //删除的时候 ，获取点击的员工的id
                deleteBtn.attr("delete-id", item.empId);

                 $("<tr></tr>").append(checkBoxItemTd)
                     .append(empIdTd)
                     .append(empNameTd)
                     .append(emailTd)
                     .append(genderId)
                     .append(deptNameTd)
                     .append(editBtn)
                     .append(" ")
                     .append(deleteBtn)
                     .appendTo("#emps_table tbody");
            })
        }
        function build_page_info(result) {
            //清空
            $("#page_info").empty();
            var pageInfo = result.extendInfo.pageInfo;
            var curPage = pageInfo.pageNum;
            var pages = pageInfo.pages;
            var totalPages = pageInfo.total;
            $("#page_info").append(" 当前第"+curPage+"页,")
                            .append("共有"+ pages +"页,")
                            .append("总共"+ totalPages + "条记录数");
            totalRecord = totalPages;
            currentPage = curPage;
        }
        function build_page_nav(result) {
            //清空
            $("#nav_pagination_info").empty();
            var nav = $("<nav></nav>");
            var ul = $("<tr></tr>").addClass("pagination");
            //首页、上一页
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //首页禁止点击，并且不显示数据
            if(result.extendInfo.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else {
                //首页，上一页添加事件，显示对应页码数据
                firstPageLi.click(function () {
                    to_page(1)
                });
                prePageLi.click(function () {
                    to_page(result.extendInfo.pageInfo.pageNum-1);
                });
            }
            //末页、下一页
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            //末页禁止点击，并且不显示数据
            if(result.extendInfo.pageInfo.hasNextPage == false){
                lastPageLi.addClass("disabled");
                nextPageLi.addClass("disabled");
            }else{
                //末页，下一页添加事件，显示对应页码数据
                lastPageLi.click(function () {
                    to_page(result.extendInfo.pageInfo.pages);
                });
                nextPageLi.click(function () {
                    to_page(result.extendInfo.pageInfo.pageNum + 1);
                });
            }

            ul.append(firstPageLi).append(prePageLi);

            //1,2,3,4,5页码显示
            $.each(result.extendInfo.pageInfo.navigatepageNums, function (index, item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if(result.extendInfo.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                //点击页码跳转到对应页码并显示对应数据
                numLi.click(function(){
                    to_page(item);
                });
                ul.append(numLi);
            })

            ul.append(nextPageLi).append(lastPageLi);
            nav.append(ul);
            $("#nav_pagination_info").append(nav);
        }

        /**
         * 清除样式
         */
        function reset_form(ele){
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }

        /**
         * 点击新增按钮，填写新增员工信息
         * 新增之前需要清除样式
         */
        $("#emp_add_btn").click(function () {
            //0 清除表单样式
            reset_form("#Emp_Add_Modal form");
            //1 获取部门信息，并显示在下拉框中
            getDeptName("#deptName_select");
            //2 显示模态框
            $('#Emp_Add_Modal').modal({
                backdrop:static,
                keyboard:true
            });
        });


        function getDeptName(ele) {
            $(ele).empty();
            $.ajax({
                url: "${APP_PATH}/dept/deptList",
                type: "GET",
                success: function (result) {
                    console.log(result);
                    //将信息显示到下拉列表中
                    $.each(result.extendInfo.depts,function () {
                        var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                        optionEle.appendTo(ele);
                    });
                }
            });
        }

        /**
         * 点击保存按钮，保存员工信息
         */
        $("#emp_save_btn").click(function () {

            //1 先校验 !validate_add_form()==true的时候说明校验有问题
           if(!validate_add_form()){
                return false;
             }
            //2 看用户名是否重复
            if($("#empName").attr("empName_validate") == "error"){
                return false;
            }

             //3 发送AJAX请求保存员工信息
            $.ajax({
                url:"${APP_PATH}/emp/save",
                type: "POST",
                data:$("#emp_add_form").serialize(),
                success: function (result) {
                    if(result.code == 100){
                        alert("保存成功");
                        //1 关闭模态框
                        $("#Emp_Add_Modal").modal("hide");
                        //2、来到最后一页，显示刚才保存的数据
                        //发送ajax请求显示最后一页数据即可
                        to_page(totalRecord);
                    }else {
                        console.log(result);
                        //显示错误信息 !=undifned 即不为空，表示有错
                        if (undefined != result.extendInfo.errorFields.eamil){
                            show_validate_msg("#email", "error", result.extendInfo.errorFields.eamil)
                        }
                        if (undefined != result.extendInfo.errorFields.empName){
                            show_validate_msg("#empName", "error", result.extendInfo.errorFields.empName);
                        }
                    }

                }
            });
        });

        /**
         * change:检测到输入框有改变后就会去验证用户名是否重复:
         */

        //校验用户名是否重复
        $("#empName").change(function () {
            var empName = this.value;
            $.ajax({
                url: "${APP_PATH}/emp/checkUser",
                data:"empName="+ empName,
                type:"POST",
                success: function (result) {
                    if(result.code == 100){
                        show_validate_msg("#empName", "success", "用户名可用");
                        $("#emp_save_btn").attr("empName_validate", "success");
                    }else {
                        //显示后台验证的错误信息
                        show_validate_msg("#empName", "error", result.extendInfo.validate_error_msg);
                        $("#emp_save_btn").attr("empName_validate", "error");
                    }
                }
            });
        });

        function show_validate_msg(ele, status, msg) {
            //清除当前元素的校验状态
            $(ele).parent().removeClass("has-error has-success");
            $(ele).next("span").text("");

            if("success"==status){
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            }else if("error"==status){
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }

        /**
         * 检验表格中输入的信息格式是否正确
         */
        function validate_add_form(){

            //验证用户名
            var empName = $("#empName").val();
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            if (!regName.test(empName)){
               // alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
               /* $("#empName").parent().addClass("has-error");
                $("#empName").next("span").text("用户名可以是2-5位中文或者6-16位英文和数字的组合");*/
               show_validate_msg("#empName", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");
                return false;
            }else{
                show_validate_msg("#empName", "success", "");
               /* $("#empName").parent().addClass("has-success");*/
            }

            //验证邮箱
            var email = $("#email").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                //alert("邮箱格式不正确！");
               /* $("#email").parent().addClass("has-error");
                $("#email").next("span").text("邮箱格式不正确！");*/
                show_validate_msg("#email", "error", "邮箱格式不正确！");
                return false;
            }else{
               /* $("#email").parent().addClass("has-success");*/
                show_validate_msg("#email", "success", "");
            }
            return true;
        }

/**
* ========================================================================================================================
* ==========================修改===================================
*========================================================================================================================
 */

        /**
         * 修改第一步：弹出修改模态框
         * 1 点击编辑，弹出模态框
         * 2 查询部门信息，显示在部门下拉框中
         * 3 查询员工信息，进行回显，员工姓名只显示不允许修改
         * 4 将员工id赋值给 更新按钮
         */
        $(document).on("click", ".edit_btn", function () {
            //0 清除表单样式
            reset_form("#Emp_Update_Modal form");

            //1 查出部门信息，进行回显
            getDeptName("#deptName_select_update");
            //2 查出员工信息，进行回显
            getEmp($(this).attr("edit-id"));
            //3 把员工的 id 传给修改Modal框的更新按钮,获取id后点击更新按钮发送Ajax请求
            $("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));

            $("#Emp_Update_Modal").modal({
                backdrop:"static",
                keyboard : true
            });
        });

        /**
         * 修改第二步：保存修改信息
         * 1 点击更新按钮，进行邮箱格式验证
         * 2 将更改的表格内容序列化，发送Ajax请求，存入数据库；
         * 3 关闭模态框
         * 4 回到本页面
         */
        $("#emp_update_btn").click(function () {

            var email = $("#email_update").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                show_validate_msg("#email_update", "error", "邮箱格式不正确！");
                return false;
            }else{
                show_validate_msg("#email_update", "success", "");
            }
            $.ajax({
                url: "${APP_PATH}/emp/updateEmp/"+ $(this).attr("edit-id"),
                type : "PUT",
                data : $("#emp_update_form").serialize(),
                success : function (result) {
                    if (result.code == 100){
                        alert("更新成功");
                        //1 关闭模态框
                        $("#Emp_Update_Modal").modal("hide");
                        //2 回到本页面
                        to_page(currentPage);
                    } else{
                        alert("更新失败");
                    }

                }
            });
        });

        /**
         * 修改：获取员工信息
         */
        function getEmp(empId){
            $.ajax({
                url: "${APP_PATH}/emp/getEmp/"+empId,
                type : "GET",
                success: function (result) {
                    var empData = result.extendInfo.employee;
                    $("#empName_update_static").text(empData.empName);
                    $("#email_update").val(empData.eamil);
                    $("#Emp_Update_Modal input[name=gender]").val([empData.gender]);
                    $("#deptName_select_update").val(empData.dId);
                }
            });
        }

/**
* ========================================================================================================================
* =========================删除==================================
*========================================================================================================================
*/

        /**
         * 单个删除
         * 1 点击删除按钮，弹出是否确认删除[XXXX]的对话框
         * 2 获取要删除的id，发送Ajax请求到后台进行删除
         */
        $(document).on("click", ".delete_btn", function () {
            var empName = $(this).parents("tr").find("td:eq(2)").text();
            var empId = $(this).attr("delete-id");
            if (confirm("确认删除【"+ empName + "】的信息吗?")){
                $.ajax({
                    url :"${APP_PATH}/emp/deleteEmp/" + empId,
                    type : "DELETE",
                    success : function (result) {
                        if (result.code == 100){
                            alert("删除成功！");
                            //回到本页面
                            to_page(currentPage);
                        } else {
                            alert("删除异常");
                        }

                    }
                });
            }
        });


        /**
         * 批量删除
         * 1 点击批量删除，弹出是否删除【XXX,XXX,XXX】的提示信息
         * 2 获取选择要删除的id
         * 3 发送Ajax请求到后台去处理
         * 4 提示删除成功，返回当前页面
         */
        $("#emp_deleteAll_btn").click(function(){
            var del_empNames = "";
            var del_empIds = "";
            $.each($(".check_item:checked"), function () {
                del_empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
                del_empIds += $(this).parents("tr").find("td:eq(1)").text()+"-";
            });
            //去除del_empNames，del_empIds
            del_empNames = del_empNames.substring(0, del_empNames.length - 1);
            del_empIds = del_empIds.substring(0, del_empIds.length - 1);

            if(confirm("确定要删除【" + del_empNames + "】的信息吗？")){
                $.ajax({
                    url : "${APP_PATH}/emp/deleteEmp/" + del_empIds,
                    type : "DELETE",
                    success : function (result) {
                        if (result.code == 100){
                            alert("批量删除成功");
                            to_page(currentPage);
                        } else{
                            alert("批量删除异常");
                        }
                    }
                });
            }
        });

        /**
         * 全选全部选:
         * 1 点击全选，则下面所有选项被选中
         * 2 再次点击全选，则下面所有选项被取消
         * 3 若当前页所有选项被选中，则全选框也自动被选中
         * 4 若当前页所有选项没有全被选中，则全选框也被取消
         */
        // 点击全选
        $("#check_all").click(function () {
            alert($(this).prop("checked"));
            //prop:为DOM原生属性赋值
            //attr: 为自定义属性赋值
            //获取全选/全不选操作属性。全选：true；全部选：false
            var flag = $(this).prop("checked");
            //flag为true的时候即为全选，下面每行都点击上；反之全不选
            $(".check_item").prop("checked", flag);
        });
        //单个点击
        $(document).on("click", ".check_item", function () {
            //判断当前选择的元素是否是整个元素的个数,是即为全选
            var flag = $(".check_item:checked").length == $(".check_item").length;
            $("#check_all").prop("checked", flag);
        });



    </script>

</body>
</html>