SSM框架整合项目03 修改，删除功能的实现

修改功能

流程：点击编辑，弹出修改页面（显示用户信息），点击更新，完成修改

生成修改页面，并回显员工信息

前端代码

index.jsp

修改页面

<!-- 修改页面 -->
<div class="modal fade" id="empUpdateModal" 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">员工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_update_input"
                                   placeholder="请输入邮箱(例：xxx@gyq.com)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_update_input" value="男"
                                       checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_update_input" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="dId" id="dept_update_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_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>
</div>

编辑按钮绑定单击事件

后端代码

EmpController

    //查询员工信息的方法
    @ResponseBody
    @RequestMapping(value = "emp/{id}", method = RequestMethod.GET)
    public Msg getEmp(@PathVariable("id") Integer id) {
        Employee employee = employeeService.getEmp(id);
        return Msg.success().add("emp", employee);
    }

EmpService

    public Employee getEmp(Integer id) {
        Employee employee = employeeMapper.selectByPrimaryKey(id);
        return employee;
    }

点击更新，更新员工数据

EmployeeController

    //更新员工信息
    @ResponseBody
    @RequestMapping(value = "/emp/{empId}", method = RequestMethod.PUT)
    public Msg updateEmp(Employee employee) {
        employeeService.updateEmp(employee);
        return Msg.success();
    }

EmployeeService

    public void updateEmp(Employee employee) {
        employeeMapper.updateByPrimaryKeySelective(employee);
    }

前端代码，部分

    //点击更新按钮更新员工数据
    $("#emp_update_btn").click(function () {
        //校验邮箱信息
        var email = $("#email_update_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            show_validate_msg("#email_update_input", "error", "邮箱格式不正确！");
            return false;
        } else {
            show_validate_msg("#email_update_input", "success", "");
        }
        //发送ajax请求保存更新的员工数据
        $.ajax({
            url: "${pageContext.request.contextPath }/emp/" + $(this).attr("edit-id"),
            type: "post",
            data: $("#empUpdateModal form").serialize() + "&_method=put",
            success: function (result) {
                //关闭编辑框
                $("#empUpdateModal").modal('hide');
            }
        });
    });

---

上方代码没有如下问题

注意：ajax直接发送put请求时，Tomcat不会将携带的数据封装到map中，request请求体和本应封装的对象的相应属性为null

在web.xml中配置FormContentFilter解决，拦截/*

删除功能

删除单一员工

前端

    //单个删除
    $(document).on("click", ".delete_btn", function () {
        //弹出是否确认删除
        var empName = $(this).parents("tr").find("td:eq(1)").text();
        var empId = $(this).attr("del-id");
        if (confirm("确认删除[" + empName + "]吗?")) {
            $.ajax({
                url: "${pageContext.request.contextPath }/emp/" + empId,
                type: "post",
                data: "&_method=delete",
                success: function (result) {
                    alert(result.msg);
                    to_page(currentPage);
                }
            });
        }
    });

后端

EmployeeControlller

    //删除员工信息
    @ResponseBody
    @RequestMapping(value = "/emp/{id}", method = RequestMethod.DELETE)
    public Msg deleteEmpById(@PathVariable("id") Integer id) {
        employeeService.deleteEmp(id);
        return Msg.success();
    }

EmployeeService

    public void deleteEmp(Integer id) {
        employeeMapper.deleteByPrimaryKey(id);
    }

批量删除

更改显示员工数据的表头

解析展示员工数据，新增一列

这里加了一个td，前面单个删除获取用户名时，就要获取第三个td的值

全选全不选

点击删除按钮删除选中记录

    //批量删除
    $("#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() + " ";
            del_idstr += $(this).parents("tr").find("td:eq(1)").text() + "-";
        });
        del_idstr = del_idstr.substring(0, del_idstr.length - 1);
        if (confirm("确认删除" + empNames + "吗?")) {
            //发送ajax请求删除
            $.ajax({
                url: "${pageContext.request.contextPath }/emp/" + del_idstr,
                type: "delete",
                data: "&_method=delete",
                success: function (result) {
                    alert(result.msg);
                    to_page(currentPage);
                }
            });
        }
    });

修改刚才的单个删除方法，使其能够批量删除

EmployeeService

总结