用户表单页面有十几个select标签,每一个都要向后台字典表请求数据,那么问题来了,在编辑的时候要将select反显应该怎么做?我们的项目是通过js请求反显的。如果要让select反显,那么只能先等待select加载以后才能反显。这样就只能将select的ajax请求设成同步,结果是加载速度极慢。所以要实现异步才行。
这时有两个思路,第一个思路,给页面的select元素设置load属性为false,当ajax请求成功执行后再设为true。将相应的用户编辑信息暂时放在缓存中,开个定时器任务,监测页面select元素的load属性,为true就将select相应的值反显。
第二个思路,先请求用户编辑内容,当返回编辑数据后,在请求返回后,再发起select的ajax请求,直接ajax返回后,直接将选中的option标签加上selected属性。
function createBindDrop(codeclass,id,select){
var sb = [];
sb.push('<option value="">==请选择==</option>');
$.ajax({
url:"请求路径",
type:"get",
dataType:"json",
data:{
codeclass:codeclass,
pageFlag:1,
rows:300
},
success:function(result){
if(result.statusCode == 200){
var list = result.data.rows;
$.each(list,function(i,n){
if(n.fullName == select)
sb.push('<option selected value="'+n.fullName+'">'+n.fullName+'</option>');
else
sb.push('<option value="'+n.fullName+'">'+n.fullName+'</option>');
});
$("#"+id).html(sb.join(""));
});
}else{
commPageAjaxDone(result);
}
}
});
}
第二个思路简单多了,所以我选择第二个方案。本来这样就大功告成了,但是我发现页面中还有一些动态生成的表单。这些表单也会请求字典表生成select。跟静态选项比多了一个麻烦,那就是我执行createBindDrop方法时,动态表单元素还没有生成,所以我得先阻塞方法,等待页面元素生成再调用html方法
function createBindDrop(codeclass,id,select){
var sb = [];
sb.push('<option value="">==请选择==</option>');
$.ajax({
url:"请求路径",
type:"get",
dataType:"json",
data:{
codeclass:codeclass,
pageFlag:1,
rows:300
},
success:function(result){
if(result.statusCode == 200){
var list = result.data.rows;
$.each(list,function(i,n){
if(n.fullName == select)
sb.push('<option selected value="'+n.fullName+'">'+n.fullName+'</option>');
else
sb.push('<option value="'+n.fullName+'">'+n.fullName+'</option>');
});
myTime(function(){
if(!!$("#"+id)[0]){//判断页面元素是否存在
$("#"+id).html(sb.join(""));
}else{
return true;
}
});
}else{
commPageAjaxDone(result);
}
}
});
}
function myTime(func,timeout){
if(!timeout)
timeout = 500;
if(!func())//
return;
setTimeout(myTime(func,timeout),timeout);
}
这里特别提一下为什么用!func()而不是!!func(),因为当方法不返回值时,!func()的值时true,因为我之前不小心没有写返回值,然后如果用!!func()做判断条件,定时器就会一直执行下去。所以!func()可以减少风险,就是只有返回true,定时器才会执行下去。
以上。