CRUD（28）：修改-回显员工信息

一、逻辑步骤

①点击编辑
②弹出用户修改的模态框（显示用户信息）
③点击更新，完成用户修改

二、定义模态框

       <!-- 修改的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 for="empName_update_input" 
class="col-sm-2 control-label">empName</label>

                                               <div class="col-sm-10">

                                                     <input type="text" 
class="form-control" name="empName"

                                                            id="empName_update_input" placeholder="empName"> <span

                                                            class="help-block"> 
</span>

                                               </div>

                                        </div>

                                        <div class="form-group">

                                               <label for="email_update_input" 
class="col-sm-2 control-label">email</label>

                                               <div class="col-sm-10">

                                                     <input type="text" 
class="form-control" name="email"

                                                            id="email_update_input" placeholder="hello123@qq.com"> <span

                                                            class="help-block"> 
</span>

                                               </div>

                                        </div>



                                        <div class="form-group">

                                               <label for="gender_update_input" 
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="m"

                                                            checked="checked"> 
男

                                                     </label> <label 
class="radio-inline"> <input type="radio"

                                                            name="gender" 
id="gender1_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" 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>

三、给编辑按钮绑定点击事件

①添加标识

                           var editBtn = $("<button></button>").addClass(

                                        "btn btn-info 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>")

②绑定事件

注意：不能直接绑定按钮点击事件，因为编辑按钮是发送ajax请求以后才获取到的，不可以在按钮创建之前绑定click。

可以在按钮创建的时候绑定事件，但这增强了代码的耦合。

我们将使用on方法完成这个逻辑。

             //为编辑按钮绑定事件

             $(document).on("click",".edit_btn",function(){

                    alert("edit");

             });

            

四、查询显示

①弹出模态框

                    $("#empUpdateModal").modal({

                           backdrop : "static"

                    });

②查询部门信息，显示部门列表

做个事前工作，每次调用getDepts方法之前，先清空一下数据：

$(ele).empty();

然后——

getDepts("#dept_update_select");

③查询员工信息，显示员工信息

修改模态框，员工姓名不允许修改，所以换成静态。

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

                                               </div>

                                        </div>

发送查询员工信息的请求：

                    function getEmp(){

                           $.ajax({

                                 

                           });

                    }



             });

在EmployeeController中写一个查询员工请求的方法：

       //通过id查询到员工并返回这个员工对象的数据（修改回显员工数据）

       @RequestMapping(value = "/emp/{id}", method = RequestMethod.GET)

       @ResponseBody

       public Msg getEmp(@PathVariable("id")Integer id){

             

             Employee employee = employeeService.getEmp(id);

             return Msg.success().add("emp", employee);

       }

@PathVariable注解：接收请求路径中占位符的值。

在EmployeeService中写完上面的getEmp()方法：

       //按ID查询员工（修改回显员工数据）

       public Employee getEmp(Integer id) {

             Employee employee = employeeMapper.selectByPrimaryKey(id);

             return employee;

       }

       

为了能在ajax请求的url中成功传送id值，我们为编辑按钮添加一个自定义的属性，来表示当前员工的id：

editBtn.attr("edit-id",item.empId);

找到当前被点击的按钮，获取按钮中的edit-id的值：

getEmp($(this).attr("edit-id"));

补齐ajax请求：

                    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]);

                           }

                    });

             }