详细笔记的第一遍：学习ssm的整合-CRUD的第7天（2021-11-27）5
28、修改_创建员工的修改模态框
现在来做这个按钮的功能。
要求：
点击某一行员工信息的编辑按钮。
首先会显示该员工的所有信息在模态框中。
逻辑：
1、点击编辑
2、弹出用户修改的模态框（显示用户信息）
3、点击更新按钮，完成用户的修改。
操作：
1、复制之前写的员工新增的模态框
<div class="modal fade" id="empAddModal" 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">×</span></button>
<h4 class="modal-title" id="myModalLabel">员工添加</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="empAddModalForm">
<div class="form-group">
<label class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
<span class="help-block"></span>
</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_add_input" placeholder="email@qq.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_add_input" value="M" checked="checked"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2_add_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" id="dept_add_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_save_btn">保存</button>
</div>
</div>
</div>
</div>
对复制过来的id值进行修改
<!-- 员工修改按钮的模态框 -->
<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">×</span></button>
<h4 class="modal-title">员工添加</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="empUpdateModalForm">
<div class="form-group">
<label class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empName_update_input" placeholder="empName">
<span class="help-block"></span>
</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@qq.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">
<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>
找到当时写的编辑按钮的位置：
2、给编辑和删除按钮 添加唯一标识
3、给编辑按钮绑定点击事件：
【注意】：
直接在script标签里面写一个function是没有用的。
为什么：
页面一加载，就会执行这些js代码，为一些组件绑事件。
这些数据是页面加载完成以后，发送ajax请求拿到的。
包括这些编辑，删除按钮都是绑事件之后才执行的。
jsp里面的$()的方法都是在页面加载的时候执行的。相当于先注册好，如果这个组件被点击了，就会做什么操作。
目前的顺序：
1、先给编辑按钮注册绑定事件
2、再发送ajax请求，产生数据的同时，产生编辑按钮。
这就导致了，我们现在写了这个代码，重新部署的时候：
点击编辑按钮，没有反应。
查看前端源代码，也是发现没有给编辑按钮绑定上点击事件的原因。解决办法：
1、我们再创建按钮的时候进行绑定事件。
2、使用jQuery的on()方法，绑定点击按钮。
即使：这个组件是后来创建的。也没有关系。就可以避免前面说的没有绑定上的情况。
目前的场景：
先注册某个按钮的绑定事件。
后创建该按钮。
$(document).on("click",".edit_btn",function(){
alert("edit");
});
现在点击编辑按钮：
现在就已经成功的绑定上了编辑按钮的点击事件。
点击编辑按钮：
1、查询当前准备更新的员工信息。显示员工信息
2、查询部门信息，并显示部门列表的下拉列表。
3、弹出模态框
1、查询部门信息。
之前已经写过了，直接复制粘贴。
//查DB的部门数据，放到下拉列表里面
function getDepts(ele){
$(ele).empty();
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
success:function (result){
// console.log(result);
//{"code":100,"msg":"处理成功！","extend":{"depts":[{"id":1,"deptName":"开发部"},{"id":2,"deptName":"测试部"}]}}
$.each(result.extend.depts,function (){
//不传参数，使用this来代表当前对象
//构建option
var optionEle = $("<option></option>")
.append(this.deptName)
.attr("value",this.id);
optionEle.appendTo(ele);
});
}
});
}
29、修改_会先员工信息。
点击了编辑按钮之后，在弹出的模态框里面显示当前待修改的员工的所有信息。
要求：empName直接显示，而不是显示在文本框里面。
意思就是点击编辑的时候，不能更改员工的empName
如何实现：表单里面某个字段值不允许修改呢？
<p class="form-control-static">email@example.com</p>
第一步：
查出你当前点击编辑的这一行员工的信息。
所以重点是：如何获取你当前点击的是哪一个元素呢？
思路：在编辑按钮里面添加一个自定义的属性，来表示当前行的员工id
右键编辑按钮，检查：
2、写好EmployeeController层为前端发来的ajax请求，通过控制器方法。
根据我们之前写好的RESTFul的URI规定
查询员工：
请求路径：/emp/{id} GET 请求
service层：
index.jsp里面发送ajax请求来查询员工数据。
点击编辑按钮，看是否会查询出当前id的员工的数据
并将数据打印在控制台上。
查询到对应id的员工的数据之后，需要填充到弹出的模态框里面。
其中问：
性别的单选框如何赋值呢？
//result代表Msg对象：查询指定id的Employee数据
var empData = result.extend.emp;
$("#empUpdateModal input[name=gender]").val([empData.gender]);
部门的多选框如何赋值呢？
$("#empUpdateModal select").val([empData.dId]);定义的方法：获取点击编辑按钮的那一行的员工数据，并填充在模态框里面。
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]);
}
});
}
测试：
针对这一行的数据，点击编辑按钮：
弹出的模态框的内容：
