前言:
我相信很多人在做项目的时候都会碰到数据回填,每当有一个修改页面那么
就逃不掉,可以说修改跟回填是已经牢牢挂钩了,那么这时候有很多小伙伴
就会很头疼了,当我们的页面的form表单需要回填的数据特别特别多的时候,
这时候如果还一个一个文本框的为他们去设置它们的value值时,就会浪费掉
我们大量的时间和精力,这种做法无疑是十分愚蠢的,那有没有一种方法,可
已让我们轻松一些呢?
答案是:有的。。。那么开始正题。
数据回填说白了就是先向控制器发出请求,然后请求回来数据后,按照字段把
相应的input标签中。
1.第一步:请求数据
这里我用jQuery的$.post方法去向后台请求数据:注key一定要和控制器中的参
数名一致,
$.post(“请求路径”,{(参数key:value),function(bd){
console.log(db)
}};
这时db就是请求回来要回填的数据了。注:db是个object,也就是这种
{key:value}的形式的。
2.第二步:数据回填
表数据请求回来后就到回填数据了,
首先回填是根据它的name属性有什么然后再从bd里面去获取
搞清楚流程后那么问题就很简单了,首先,是根据name。我们都知道form的input
的name其实呢就是bd里面的key,而对象里获取值的方式有
- Obj.key=value;
- Obj[key]=value.这里很明显要用第二种昂,第一种是明确的指定了对象里的key
而第二种括号里面可以是个变量,它可以是Obj里面的任意一个keyname。
话到这里其实已经十分明确
for(let a in bd){
//注:a是bd的key
let val=bd[a];
//再说一遍吧:input的name值一般都是与库中的键是一致的,那么去请求
回来的数据也是一样的
那么a呢其实也就是input的name属性的值
那么我们就可以通过name去锁定需要回填的标签
$(“input[name=’`${a}`’]”),其实最好是给他们一个统一的class,比如说这个表
单是t1,另一个是t2,这样可以防止别的form表单里面的input有相同的
name值.
//这里还需要对值进行以下判断,像true/false这些一般都是复选框的,如果
是true就得勾上,而不是把true填进去,所以要过滤掉Boolean值
If(obj[a].construtor==Boolean){
If(obj[a]){
$(“input[name=’`${a}`’]”).click();
}
}else{
$(“input[name=’`${a}`’]”).val(obj[a]);
}
}
总结:代码
function (url, parameter , unifiedclass){
$.post(url,parameter,function(bd){
for(let a in bd){
let content=bd[a];
if(content.construtor==Boolean){
if(content){
$(“.`${ unifiedclass }`[name=’`${a}`’]”).click();
}
}else{
$(“. `${ unifiedclass }` [name=’`${a}`’]”).val(content);
}
}
}
}
};
Emmmmmm….没毛病,就是这些个代码就能满足我的需求了