最近在编程的时候遇到了以下问题,代码如下:
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的内容一般来说都是最后才展示的