通过layui在前端获取数据回填表单

在更新功能中,通过layui直接在前端查到数据,并回填到表单。不再使用sql语句根据id查询单条数据

语法:form.val(‘filter’, object);

用于给指定表单集合的元素赋值和取值。如果 object 参数存在,则为赋值;如果 object 参数不存在,则为取值

filter为class=“layui-form” 所在元素对应的lay-filter=””对应的值

table.on('tool(testTable)', function (obj) {
    
     //tool 是行工具条事件名
	var data = obj.data; //获得当前行数据
	edit_layer_index = layer.open({
    
    
		type:1,
		title:["编辑","padding-left:5px"],
		content:layui.$("#user_edit_form"),
		shade:false,
		area:"500px",
	})
	console.log(data)
	//获取表单回填数据
	form.val("user_edit",data)
})
// 编辑表单提交
form.on('submit(user_edit_submit)',function (data) {
    
    	      
	var updatFormData = data.field
	$.ajax({
    
    
		type:"post",
		url:"http://localhost:8080/ssm/updatUser",
		data:JSON.stringify(updatFormData),
		contentType:"application/json",
		xhrFields: {
    
    
		// 跨域携带cookie
			withCredentials: true
		},
		crossDomain: true,
		success:function (ret) {
    
    
			if(ret.code==1){
    
    
			layer.close(edit_layer_index)
			layer.msg("修改成功")
			table.reload("user_table")
			}else {
    
    
				layer.close(edit_layer_index)
				layer.msg("修改失败")
			}
		}
	});
})
<!--编辑表单-->
<div id="user_edit_form" style="display: none;padding: 10px;">
    <form class="layui-form" lay-filter="user_edit">
	<!--输入框-->
    </form>
</div>

猜你喜欢

转载自blog.csdn.net/qq_41841482/article/details/108263420