本文地址:http://www.cnblogs.com/maplefighting/p/7522985.html
首先呢，點擊修改要有個修改的模態框，和添加的差不多，用戶名不能修改
<!-- 員工修改模態框 -->
<!-- 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">×</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> 男 </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
作用：將請求體中的數據解析包裝成map，重寫getgetParameter
在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); } }); });
修改功能就做好啦!