ssm项目之员工修改

首先呢,点击修改要有个修改的模态框,和添加的差不多,用户名不能修改

<!-- 员工修改模态框 -->
    <!-- Modal -->
    <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">empName</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">email</label>
                <div class="col-sm-10">
                  <input type="text" name="email" class="form-control" id="email_update_input" placeholder="[email protected]">
                  <span class="help-block"></span>
                </div>
              </div>
             <div class="form-group">
                <label class="col-sm-2 control-label">gender</label>
                <div class="col-sm-10">
                  <label class="radio-inline">
                      <input type="radio" name="gender" id="gender1_update_input" value="M" checked> 男
                  </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">

                    </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>

到function build_emps_table(result)中添加个标识 (之前的代码已经加上了)

为button加上点击事件,因为是在ajax加载后才绑定上事件的,所以不能直接用click,用click是请求前就绑定,没用

解决方法:1、可以在创建按钮的时候绑定,但是要在原来的代码上再加上一堆

2、用jquery的on事件

//jquery新版没有live。使用on进行替代
    $(document).on("click", ".edit_btn",function() {
        //alert("edit");
        //弹出模态框
        //查询部门信息
         getDepts("#empUpdateModal select");
        //alert($(this).attr("edit-id"));
        //查处员工信息。
        //getEmp($(this).attr("edit-id"));

        //把员工 的 id 传递给模态框的更新按钮
        $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
        $("#empUpdateModal").modal({
            backdrop:"static"
        }); 

    });

接下来写查询员工

EmployeeController.java里加的方法

/**
     * 查询姓名
     */
    @RequestMapping(value="/emp/{id}", method=RequestMethod.GET)
    @ResponseBody
    public Msg getEmp(@PathVariable("id")Integer id) {
        System.out.println(id);
        Employee employee = employeeService.getEmp(id);
        return Msg.success().add("emp", employee);
    }

EmployeeService.java

/**
     * 按照员工id查询员工
     * @param id
     * @return
     */
    public Employee getEmp(Integer id) {
        Employee employee = employeeMapper.selectByPrimaryKey(id);
        return employee;
    }

index.jsp页面

//jquery新版没有live。使用on进行替代
    $(document).on("click", ".edit_btn",function() {
        //alert("edit");
        //弹出模态框
        //查询部门信息
         getDepts("#empUpdateModal select");
        //alert($(this).attr("edit-id"));
        //查处员工信息。
        getEmp($(this).attr("edit-id"));

        //把员工 的 id 传递给模态框的更新按钮
        $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
        $("#empUpdateModal").modal({
            backdrop:"static"
        }); 

    });
    //获取员工
    function getEmp(id) {
        $.ajax({
            url:"${APP_PATH}/emp/"+id,
            type: "GET",
            success: function(result) {
                var empData = result.extend.emp;
                $("#empName_update_static").text(empData.empName);
                $("#email_update_input").val(empData.email);
                $("#empUpdateModal input[name=gender]").val([empData.gender]);
                $("#empUpdateModal select").val([empData.dId]);
            }
        });
    }

在之前的function build_emps_table(result)已经加了id,所以直接用

这样就可以显示啦,接下来就是更新按钮的操作了

首先先给更新按钮加个id,方便传递参数

在点击显示模态框那里添加 (之前也添加过了)

EmployeeController.java

/**
     * 保存更新
     * @param employee
     * @return
     */
    @ResponseBody
    @RequestMapping(value="/emp/{empId}", method=RequestMethod.PUT)
    public Msg saveEmp(Employee employee) {
        //System.out.println(employee);
        employeeService.updateEmp(employee);
        return Msg.success();
    }

写成这样时与Employee.java里面的empId不对应,所以会更新不了

得写成这样

index.jsp的点击更新可以这样写

//点击更新,更新员工信息
    $("#emp_update_btn").click(function() {
        //验证邮箱是否合法
        //1、校验邮箱信息
        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:"${APP_PATH}/emp/" + $(this).attr("edit-id"),
            type: "POST",
            data:$("#empUpdateModal form").serialize()+"&_method=PUT",
            success:function(result) {
                //alert(result.msg);
                $("#empUpdateModal").modal("hide");
                to_page(currentPage);
            }
        });
    });

但是这个POST再带PUT有点别扭,但是直接改数据传不过去报错了

如果直接发送ajax=put的请求,Employee全是null,请求体中有数据,但是封装不了

原因:是tomcat的问题(具体情况可以查看源码)

1、将请求题中的数据封装成一个map

2、request.getParameter("")会从这个map中取值

3、SpringMVC封装pojo对象时会把pojo每个属性中的值request.getParameter("")

但是这个也获取不了

原因:Ajax发送PUT请求时,tomcat一看是PUT请求就不会封装请求数据为map,只有post才会

Spring提供了过滤器 HttpPutFormContentFilter

在web.xml配置

<filter>
      <filter-name>HttpPutFormContentFilter</filter-name>
      <filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>HttpPutFormContentFilter</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>

测试下,成功了

index.jsp

//点击更新,更新员工信息
    $("#emp_update_btn").click(function() {
        //验证邮箱是否合法
        //1、校验邮箱信息
        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:"${APP_PATH}/emp/" + $(this).attr("edit-id"),
            type: "PUT",
            data:$("#empUpdateModal form").serialize(),
            success:function(result) {
                //alert(result.msg);
                $("#empUpdateModal").modal("hide");
                to_page(currentPage);
            }
        });
    });

修改功能就做好啦!

时间: 09-15

ssm项目之员工修改的相关文章

SSM项目整合基本步骤

SSM项目整合 1.基本概念 1.1.Spring Spring 是一个开源框架, Spring 是于 2003  年兴起的一个轻量级的 Java  开发框架,由 Rod Johnson  在其著作 Expert One-On-One J2EE Development and Design 中阐述的部分理念和原型衍生而来.它是为了解决企业应用开发的复杂性而创建的. Spring 使用基本的 JavaBean 来完成以前只可能由 EJB 完成的事情.然而, Spring 的用途不仅限于服务器端的开

git 提交新项目,并修改用户名以及提交邮箱 &nbsp;

本地有一个项目myweb,里面有.git目录. 线上新建了git仓库,gitweb. 现在要把myweb提交到线上. 直接在myweb目录下,以免冲突,提交不了.所以我用了copy的方法. 1.先把项目myweb的 .git目录,删除. 2.在/data目录下,git clone线上的仓库. 3.cp -r /data/myweb/* /data/gitweb 4.进入gitweb目录 5.git add . 6.git commit -m 'first commit' 7.git pull 8

ssm项目之mybatis逆向工程与修改测试

以员工和部门表为例 一.mybatis生成代码 本来要写dao,bean,和mapper文件,但是使用mybatis逆向工程可以自动生成 http://www.mybatis.org/generator/ 引入quick start guide里面的jar包,我们可以用Maven引入mybatis generator,同样去http://mvnrepository.com/ 找(我用的是1.3.5) 可以按这个http://www.mybatis.org/generator/configrefe

ssm项目之新增员工

点新增按钮会出现新增的窗口,查询bootstrap文档的js里面有案例 表单的样例也可以参照css里面的 在index.jsp 的body最上面加上模态框 <!-- 员工添加模态框 --> <!-- Modal --> <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="

Java商户管理系统 客户管理 库存管理 销售报表 SSM项目源码

需求分析: 有个厂家,下面有很多代理商(商户或门头等),之前商户进货.库存.销售.客户资料等记录在excel表格中 或者无记录,管理比较混乱,盈利情况不明.不能有效了解店铺经营情况和客户跟踪记录 厂家也不能实时了解下面代理商的经营状况和库存情况 解决方案: 本系统角色主要分两个层级:总管理(厂家),下级管理(商户) 各商户管理自己的进销存数据和客户资料 厂家能查看所有商户实时经营情况 --------------------------------------------------------

SSM框架 SSM项目源码 SSM源码 下载 java框架整合Springmvc+mybatis+shiro+bootstrap

获取[下载地址]  QQ: 313596790A 调用摄像头拍照,自定义裁剪编辑头像,头像图片色度调节B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,service等完整模块C 集成阿里巴巴数据库连接池druid  数据库连接池  阿里巴巴的 druid.Druid在监控.可扩展性.稳定性和性能方面都有明显的优势D 集成安全权限框架shiro  Shir

java 进销存 商户管理系统 库存管理 销售报表 SSM项目 客户管理

系统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java web(非maven, 附赠pom.xml文件)  数据库:mysql 3.开发工具:myeclipse  eclipse idea 均可, 没有限制. 我这边myeclipse 2014 导出来的项目源码 ---------------------------------------

SSM框架 SSM项目源码 SSM源码

1. 模块化.服务化,流程化,耦合度低.扩展性好,灵活度高,工具类封装完整,干净利索,调用简单方便 2. 提供Rest服务,支持APP手机应用(android和ios)接口.php..net.易语言.VB等第三方接口调用 3. 全新高大尚HTML5+css3.0+bootstrap响应式开发界面UI,( 手机 PC 平板 截图在下面).前沿.  spring restful 风格 4. 框架搭建完善成熟,在此基础上做过很多项目,系统具有并发处理.分布式.稳定性. 5. 系统功能完善,此为框架平台

SSM项目经常遇到的乱码问题

开发时使用jetty一切正常的项目,部署到linux中tomcat下,卧槽,各种乱码问题,记录一下解决过程: 1. 路径上有中文无法打开,是因为tomcat不支持 修改conf/server.xml,添加URIEncoding(搜索port="8080") <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort=&