SSM框架的(CRUD)_修改_创建员工修改模态框22

修改逻辑

• 1、点击编辑
• 2、弹出用户修改的模态框（显示用户信息）
• 3、点击更新，完成用户修改

一、新增修改模态框

<!-- 员工修改的模态框 -->
<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@atguigu.com">
              <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="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">
                <!-- 部门提交部门id即可 -->
              <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>

二、给每一个编辑按钮添加唯一标识（同时给每一个删除按钮添加唯一标识）

var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append($("<span></span>").addClass("glyphicon glyphicon-trash")).append"删除");

三、绑定点击事件

//1、我们是按钮创建之前就绑定了click，所以绑定不上。
//1）、可以在创建按钮的时候绑定。    2）、绑定点击.live()
//jquery新版没有live，使用on进行替代
    $(document).on("click",".edit_btn",function(){
            //alert("edit");
            //0、查出员工信息，显示员工信息
            getDepts("#empUpdateModal select");
            //1、查出部门信息，并显示部门列表
            $("#empUpdateModal").modal({
                backdrop:"static"
            });
        })

四、封装查询方法

//查出所有的部门信息并显示在下拉列表中
        function getDepts(ele){
//清空之前下拉列表的值
            $(ele).empty();
            $.ajax({
                url:"${APP_PATH}/depts",
                type:"GET",
                success:function(result){
                    //{"code":100,"msg":"处理成功！",
                    //"extend":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}
                    //console.log(result)
                    //显示部门信息在下拉列表中
                    //$("#empAddModal select").append("")
                    $.each(result.extend.depts,function(){
                        var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                        optionEle.appendTo(ele);
                    });
                }
            })
        };

五、修改新增按钮弹出模态框

//点击新增按钮弹出模态框。
$("#emp_add_modal_btn").click(function(){
    //清除表单数据（表单完整重置（表单的数据，表单的样式））
    reset_form("#empAddModal form");
    //发送ajax请求，查出部门信息，显示在下拉列表中
    getDepts("#empAddModal select");
    //弹出模态框
    $("#empAddModal").modal({
        backdrop:"static"
    });
});