逻辑
1.点击编辑 2.弹出信息修改的模态框(显示用户信息) 3.点击更新,完成修改
那么,我们需要为每一个按钮进行绑定点击事件
但要注意:我们的数据是通过ajax请求的方式获取的,按钮也是此后才加载进去的,那么如果我们使用属性绑定的话,是无法成功的,因为绑定发生在按钮生成之前。
解决办法:
1.可以在创建按钮的时候绑定事件
2.绑定单击,live属性可以在后添加时也能够绑定成功 但在 JQery 新版本中,live这个属性被删除了,但使用了 on 事件来代替。
**
**
//1、我们是按钮创建之前就绑定了click,所以绑定不上。
//1)、可以在创建按钮的时候绑定。 2)、绑定点击.live()
//jquery新版没有live,使用on进行替代
$(document).on("click",".edit",function(){
//alert("edit");
//1、查出部门信息,并显示部门列表
getDepts("#editmodal select");
//2、查出员工信息,显示员工信息
//getEmp($(this).attr("edit-id"));
getUserById($(this).attr("edit-id")) //当前属性下获取这个属性的id
//3、把员工的id传递给模态框的更新按钮
//$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
$("#editmodal").modal({
backdrop:"static"
});
});
function getUserById(id){
$.ajax({
url:"${APP_PATH}/getuserbyid/"+id,
type:"GET",
success:function(result){
//console.log(result);控制台打印
var datas=result.extend.user;
$("#userName").text(datas.userName);
$("#dept_select").val([datas.userEid]);//下拉列表选中
}
});
}
此外,要注意点击方法的使用是有区别的
完成这些后,我们需要将所获取的数据进行回显到修改模态框中
获取点击的id后数据库查询出这个员工的信息并将其显示在里面
function getUserById(id){
$.ajax({
url:"${APP_PATH}/getuserbyid/"+id,
type:"GET",
success:function(result){
//console.log(result);控制台打印
var datas=result.extend.user;
$("#userName").text(datas.userName);
$("#dept_select").val([datas.userEid]);//下拉列表选中
}
});
}
//点击更新员工信息
$("#edit").click(function(){
$.ajax({
url:"${APP_PATH}/upduser/"+$(this).attr("edit-id"),
type:"POST",
data:$("#editmodal form").serialize(),
success:function(result){
//console.log(result);控制台打印
//alert(result.msg)
$('#editmodal').modal("hide"); //关闭模态框
to_page(currentPage)//跳转会原页面
}
});
});
@RequestMapping(value="/getuserbyid/{id}")
@ResponseBody
public Msg getUserById(@PathVariable("id")Integer id){
//指定这个id是从路径中取得的
USer user=userservice.getUser(id);
return Msg.success().add("user", user);
}
/*
* ajax发送的数据,如果直接除了id全是null
* 问题:
* 请求体中有数据,但User对象封装不上 即为 update user where id=? 则语法出错
* 原因:
* tomcat 会将请求体中的数据,封装一个map
* request.getParament("user) 从这给map取值
* 而在springmvc中,其会将POJO属性每个值获取数据
* PUT这的请求不能直接发,Tomcat一看是PUT就不封装
*/
@RequestMapping(value="/upduser/{userId}",method=RequestMethod.POST)
@ResponseBody
public Msg UpdateUser(USer user){
userservice.upduser(user);
return Msg.success();
}
这样,修改操作就完成了,那么接下来,就是完成删除操作了。
码字不易,给个赞呗!