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

快来打我* 2022-11-05 03:15 160阅读 0赞

**逻辑**

> 1.点击编辑 2.弹出信息修改的模态框（显示用户信息) 3.点击更新，完成修改

那么，我们需要为每一个按钮进行绑定点击事件  
但要注意：我们的数据是通过ajax请求的方式获取的，按钮也是此后才加载进去的，那么如果我们使用属性绑定的话，是无法成功的，因为绑定发生在按钮生成之前。  
解决办法：  
1.可以在创建按钮的时候绑定事件  
2.绑定单击，live属性可以在后添加时也能够绑定成功 但在 JQery 新版本中，live这个属性被删除了，但使用了 on 事件来代替。  
\*\*![加粗样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]  
\*\*

//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]);//下拉列表选中
    				
    			}
    		});
    	}

此外，要注意点击方法的使用是有区别的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 1]  
完成这些后，我们需要将所获取的数据进行回显到修改模态框中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 2]  
获取点击的id后数据库查询出这个员工的信息并将其显示在里面

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

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

码字不易，给个赞呗！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]: /images/20221023/e15d8634635b4296a9c40b795f212a45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 1]: /images/20221023/43b4c2fa7371468e999b2fe5a675f661.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 2]: /images/20221023/6f622c451baf4124995bfd818246b066.png