SSM框架学习之创建修改模态框

逻辑

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();
	}

这样，修改操作就完成了，那么接下来，就是完成删除操作了。

码字不易，给个赞呗！