1、CRUD-删除对话框

在这里插入图片描述

2、CRUD-删除逻辑

2.1、在EmployeeController类中添加deleteEmp()方法

 /**
     * 单个、批量删除二合一
     * 批量删除：1-2-3
     * 单个删除：1
     * @param ids
     * @return
     */
    @RequestMapping(value = "/emp/{ids}",method = RequestMethod.DELETE)
    @ResponseBody
    public Msg deleteEmp(@PathVariable("ids") String ids){
        //批量删除
        if (ids.contains("-")){
            List<Integer> del_ids = new ArrayList<>();
            String[] str_ids = ids.split("-");
            //组装id的集合
            for (String string : str_ids){
                del_ids.add(Integer.parseInt(string));
            }
            employeeService.deleteBatch(del_ids);
        }else {
            //单个删除
            Integer id = Integer.parseInt(ids);
            employeeService.deleteEmp(id);
        }
        return Msg.success();
    }

2.2、在EmployeeService类中添加deleteEmp()、deleteBatch()方法

  /**
     * 单个员工删除
     * @param id
     */
    public void deleteEmp(Integer id) {
        employeeMapper.deleteByPrimaryKey(id);
    }

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

2.3、为delete删除按钮绑定单击事件

  //单个删除
        //为delete删除按钮绑定单击事件（有点特殊）
        //因为我们是按钮创建之前就绑定了click单击事件，所以绑定不上
        //1）、可以在创建按钮的时候绑定（比较繁琐，耦合度高）
        //2）、绑定点击.live（）：可以为后面添加的元素也绑定一个事件
        //但是新版jquery没有live，使用on进行替代（在整个文档document中选择指定的后代元素.delete_btn绑定事件）
        $(document).on("click",".delete_btn",function () {
            //弹出是否确认删除对话框
            //alert($(this).parents("tr").find("td:eq(1)").text());
            var empName = $(this).parents("tr").find("td:eq(2)").text();
            var empId = $(this).attr("delete-id");
            if (confirm("确认删除【"+empName+"】吗？")){
                //确认，发送ajax请求删除即可
                $.ajax({
                   url:"${APP_PATH}/emp/" + empId,
                   type:"DELETE",
                   success:function (result) {
                       alert(result.msg);
                       //删除成功，回到本页
                       to_page(currentPage);
                   }
                });
            }
        });

        //完成全选/全不选功能
        $("#check_all").click(function () {
            //attr获取checked是undefined，获取的是自定义属性的值
            //prop修改和获取dom原生的属性的值
            //alert($(this).prop("checked"));
            $(".check_item").prop("checked",$(this).prop("checked"));
        });

        //为check_item绑定单击事件（有点特殊）
        //因为我们是按钮创建之前就绑定了click单击事件，所以绑定不上
        //1）、可以在创建按钮的时候绑定（比较繁琐，耦合度高）
        //2）、绑定点击.live（）：可以为后面添加的元素也绑定一个事件
        //但是新版jquery没有live，使用on进行替代（在整个文档document中选择指定的后代元素.check_item绑定事件）
        $(document).on("click",".check_item",function () {
            //判断当前选择中的元素是否是5个
            var flag = $(".check_item:checked").length == $(".check_item").length;
            $("#check_all").prop("checked",flag);
        })

        //点击全部删除，就批量删除
        $("#emp_delete_all_btn").click(function () {
            var empNames = "";
            var del_idStr = "";
            $.each($(".check_item:checked"),function () {
                //组装员工名字的字符串
                empNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
                //组装员工id的字符串
                del_idStr += $(this).parents("tr").find("td:eq(1)").text() + "-";
            })
            //去除empNames多余的,
            empNames = empNames.substring(0,empNames.length - 1);
            //去除del_idStr(删除的id：1-2-3-)多余的-
            del_idStr = del_idStr.substring(0,del_idStr.length - 1);
            if (confirm("确认删除【"+empNames+"】吗？")){
                //发送ajax请求删除
                $.ajax({
                   url:"${APP_PATH}/emp/" + del_idStr,
                    type:"DELETE",
                    success:function (result) {
                        alert(result.msg);
                        //回到当前页面
                        to_page(currentPage);
                    }
                });
            }
        });