SSM:十一、CRUD的删除员工功能

思路:1、单一删除:①在服务端发送/emp/{id}请求,发送的请求的类型为DELETE,将id的参数类型为依据路径来查找。
②发送ajax请求,对数据进行删除。

2、批量删除:①在服务端发送/emp/{ids}请求,发送请求类型一样为DELETE。在后端进行具体操作对ids的分割和转化为集合对象。
②在前端页面加入多选radio,以便选择演删除员工的信息。
③用jQuery对复选框的全选以及全不选按钮进行相应的操作。
④利用ajax发送请求,进行对数据的删除。

单一删除

服务后端的control层的service层的操作

controller层

	 @ResponseBody
    @RequestMapping(value = "/emp/{id}",method = RequestMethod.DELETE)
    public Msg deleteEmp(@PathVariable("id") Integer id) {
           employeeService.deleteEmp(id);
           return Msg.success();
       }
    }

EmpService层

 /**
     * 删除员工,根据主键id来删除
     * @param id
     */
    public void deleteEmp(Integer id) {
        employeeMapper.deleteByPrimaryKey(id);

    }

在前端进行发送ajax请求

	//删除员工
    //给删除的按钮的样式添加点击监听
    $(document).on('click','.delete_btn',function () {
       //找到empName值,找到tr的第二个td的值,即empName的值。
        var empname = $(this).parents('tr').find('td:eq(2)').text();
        //alert(empname)
        //获取定义的属性值,从之中取出
        var empId = $(this).attr('del-id');
        //弹框是否删除
        if(confirm("确认删除 ["+empname+"] 吗?")) {
            //如果确认删除,就用ajax发送请求交给服务器来处理
            $.ajax({
                url:"${APP_PATH}/emp/"+empId,
                type:"DELETE",
                success:function (result) {
                    alert(result.message);
                    //转向本页
                    to_Page(current_page);
                }
            })
        }
    });

批量删除

在后端对数据的的解析和发送请求

EmpService层

/**
     * 批量删除
     * @param ids
     */
    public void deleteBatch(List<Integer> ids) {
        //创造删除条件
        EmployeeExample example = new EmployeeExample();
        EmployeeExample.Criteria criteria = example.createCriteria();
        //SQL语句:delete emp where emp_id in (ids)
        criteria.andEmpIdIn(ids);
        employeeMapper.deleteByExample(example);
    }

controller层

 /**
     * 单一删除和批量删除二合一
     * 删除员工
     */
    @ResponseBody
    @RequestMapping(value = "/emp/{ids}",method = RequestMethod.DELETE)
    public Msg deleteEmp(@PathVariable("ids") String ids) {
        //如果包含 - 符号,就是批量删除,否则就为单一删除
       if(ids.contains("-")) {
           List<Integer> list_ids = new ArrayList<>();
           //将ids分割,把ids去掉
            String[] strings= ids.split("-");
            //遍历分割后的ids,组装id,将组装后的id转化为Integer格式,添加进List集合
           for (String str : strings) {
               list_ids.add(Integer.parseInt(str));
           }
            //把list集合的id传入批量删除的条件中
            employeeService.deleteBatch(list_ids);
             return Msg.success();
       }else {
           //将字符串转化为Integer类型
           Integer id = Integer.parseInt(ids);
           employeeService.deleteEmp(id);
           return Msg.success();
       }
    }

前端页面的全选及全不选的jQuery操作

  //给全选的复选框添加点击监听,全选/全不选
    $('#check_all').click(function () {
        //先得到总复选的状态,将该状态传递给各个子复选框
        $(this).prop('checked');
        //将得到的状态传给子复选框
        $('.check_item').prop('checked',$(this).prop('checked'));
    })

    //给各个子复选框添加点击监听
    $(document).on('click','.check_item',function () {

        //alert($('.check_item:checked').length);
        //如果当期那点击的子复选框的个数等于子复选框的全部个数,全选复选框就选中
        if($('.check_item:checked').length == $(".check_item").length) {
            $('#check_all').prop('checked','checked');
        }
    });

发送的ajax请求的具体操作:

	//批量删除
    $('#del_emp').click(function () {
        //取出员工的Name和id
        var empName= "";
        var empId = "";
        //alert($('.check_item:checked').parents('tr').find('td:eq(2)').text());
        //将员工的Name和Id进行拼接
        $.each($('.check_item:checked'),function () {
            //员工的Name
            empName += $(this).parents('tr').find('td:eq(2)').text()+",";
            //员工的ID
            empId += $(this).parents('tr').find('td:eq(1)').text()+"-";
        })
        //拼接员工名字和id,去掉最后一个,号
        empName = empName.substring(0,empName.length-1);
        empId = empId.substring(0,empId.length-1);
        console.log(empId)

        if(confirm("确认删除["+empName+"]吗")){
            //如果确认删除,发送ajax请求
            $.ajax({
                url:'${APP_PATH}/emp/'+ empId,
                type:'DELETE',
                success:function (result) {
                    alert("删除成功!");
                    //删除成功后转向本页
                    to_Page(current_page);
                }
            })
        }
    })

具体的实现结果:

SSM:十一、CRUD的删除员工功能