关于js dwr执行顺序造成的combobox赋值不显示问题

最近在编程的时候遇到了以下问题,代码如下:

function editLine(CODE) {
	// 点击修改按钮后,根据点击的条目的ID进行查询,并将数据展示到界面中
	$("input[id='cablename']").attr("disabled", "disabled"); // 编辑时锁定名字,自动生成
	PathDwrUtil.getSegById(CODE, callBackFunc);
	function callBackFunc(data) {
		debugger
		var code = data[0].CODE; // 识别码
		var name = data[0].NAME; // 名称
		var apointtype = data[0].A_POINTTYPE; // 起点资源类型
		var apoint = data[0].A_POINT; // 起点资源
		var apointname = data[0].A_POINT_NAME; // 起点资源
		var pathbelong = data[0].PATHBELONG; // 所属线路
		var zpointtype = data[0].Z_POINTTYPE; // 终点资源类型
		var zpoint = data[0].Z_POINT; // 终点资源
		var zpointname = data[0].Z_POINT_NAME; // 终点资源
		var assetunit = data[0].ASSET_UNIT; // 归口管理单位
		var functionunit = data[0].FUNCTION_UNIT; // 运维单位
		var voltlevel = data[0].VOLTLEVEL; // 电压等级
		var ocablemodel = data[0].OCABLEMODEL; // 光缆类型
		var ocabletype = data[0].OCABLETYPE; // 光缆型号
		var laymode = data[0].LAYMODE; // 敷设方式
		var length = data[0].LENGTH; // 长度
		var fibercount = data[0].FIBERCOUNT; // 纤芯数目
		$("input[id = 'code'] ").val(code);
		$("input[id = 'cablename'] ").val(name);
		$("input[id = 'pathbelong'] ").val(pathbelong);
		$('#apointtype').combobox('select', apointtype);
		$('#zpointtype').combobox('select', zpointtype);
		PathDwrUtil.getPointList(apointtype, function(data) {
			$('#apoint').combobox({
				data: data, //获取要显示的json数据
				 valueField: 'CODE',
				 textField: 'NAME',
				height: fixHeight()
			});
			$('#apoint').combobox('reload', data);
			
		});
		PathDwrUtil.getPointList(zpointtype, function(data) {
			console.log(data);
			$('#zpoint').combobox({
				data: data, //获取要显示的json数据
				 valueField: 'CODE',
				 textField: 'NAME',
				height: fixHeight()
			});
			$('#zpoint').combobox('reload', data);
			
		});
        $('#apoint').combobox('select', apoint);
        $('#zpoint').combobox('select', zpoint);
    	$('#assetunit').combotree('setValue', assetunit);
		$('#functionunit').combotree('setValue', functionunit);
		$('#voltlevel').combobox('select', voltlevel);
		$('#ocablemodel').combobox('select', ocablemodel);
		$('#laymode').combobox('select', laymode);
		$("input[id = 'ocabletype'] ").val(ocabletype);
		$("input[id = 'length'] ").val(length);
		$("input[id = 'fibercount'] ").val(fibercount);
		$("#pacn").attr("style", "display:block;");
		$("#pacc").attr("style", "display:none;");
		$("#pacs").attr("style", "height:50%;");
	}
}

 最初的时候是这样的,这里做了一个依赖,就是zpointtype和apointtype选中发生改变时,apoint和azpoint的候选框内容跟着改变.但是出现了一点问题就是候选框中的值加载不进去,一闪而逝.问题出在哪里呢?

经过打断点分析后可知,这两个combobox的数据加载是最后进行的,换句话说,代码是先给apoint和zpoint赋值后才把这两个combobox的候选框的内容加载进去,也就造成了先给框赋值apoint的代码35.36,而候选框内容加载进来后发现其名称并不处于候选内容,从而触发limitToList : true 属性而被删掉,这就是为什么结果一闪而逝的原因.

因此后续修改为:

function editLine(CODE) {
	// 点击修改按钮后,根据点击的条目的ID进行查询,并将数据展示到界面中
	$("input[id='cablename']").attr("disabled", "disabled"); // 编辑时锁定名字,自动生成
	PathDwrUtil.getSegById(CODE, callBackFunc);
	function callBackFunc(data) {
		var code = data[0].CODE; // 识别码
		var name = data[0].NAME; // 名称
		var apointtype = data[0].A_POINTTYPE; // 起点资源类型
		var apoint = data[0].A_POINT; // 起点资源
		var apointname = data[0].A_POINT_NAME; // 起点资源
		var pathbelong = data[0].PATHBELONG; // 所属线路
		var zpointtype = data[0].Z_POINTTYPE; // 终点资源类型
		var zpoint = data[0].Z_POINT; // 终点资源
		var zpointname = data[0].Z_POINT_NAME; // 终点资源
		var assetunit = data[0].ASSET_UNIT; // 归口管理单位
		var functionunit = data[0].FUNCTION_UNIT; // 运维单位
		var voltlevel = data[0].VOLTLEVEL; // 电压等级
		var ocablemodel = data[0].OCABLEMODEL; // 光缆类型
		var ocabletype = data[0].OCABLETYPE; // 光缆型号
		var laymode = data[0].LAYMODE; // 敷设方式
		var length = data[0].LENGTH; // 长度
		var fibercount = data[0].FIBERCOUNT; // 纤芯数目
		$("input[id = 'code'] ").val(code);
		$("input[id = 'cablename'] ").val(name);
		$("input[id = 'pathbelong'] ").val(pathbelong);
		$('#apointtype').combobox('select', apointtype);
		$('#zpointtype').combobox('select', zpointtype);
		PathDwrUtil.getPointList(apointtype, function(data) {
			$('#apoint').combobox({
				data: data, //获取要显示的json数据
				 valueField: 'CODE',
				 textField: 'NAME',
				height: fixHeight()
				
			});
			$('#apoint').combobox('reload', data);
			$('#apoint').combobox('select', apoint);
		});
		PathDwrUtil.getPointList(zpointtype, function(data) {
			console.log(data);
			$('#zpoint').combobox({
				data: data, //获取要显示的json数据
				 valueField: 'CODE',
				 textField: 'NAME',
				height: fixHeight()
			});
			$('#zpoint').combobox('reload', data);
			$('#zpoint').combobox('select', zpoint);
		});
		$('#assetunit').combotree('setValue', assetunit);
		$('#functionunit').combotree('setValue', functionunit);
		$('#voltlevel').combobox('select', voltlevel);
		$('#ocablemodel').combobox('select', ocablemodel);
		$('#laymode').combobox('select', laymode);
		$("input[id = 'ocabletype'] ").val(ocabletype);
		$("input[id = 'length'] ").val(length);
		$("input[id = 'fibercount'] ").val(fibercount);
		$("#pacn").attr("style", "display:block;");
		$("#pacc").attr("style", "display:none;");
		$("#pacs").attr("style", "height:50%;");
	}
}

区别在于,apoint和zpoint的赋值语句是写在两个combobox的加载语句段之中的,也就是说只有这两个加载完毕后,代码才会执行赋值语句,从而有效避免了不显示值的问题.

经验:善用断点分析,并且要对js的运行机制与顺序有了解.

并且,由此看来calbackfunction的内容一般来说都是最后才展示的