select异步加载和自定义定时触发器

用户表单页面有十几个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,定时器才会执行下去。

以上。

猜你喜欢

转载自blog.csdn.net/qq_36804701/article/details/80661816