使用级联下拉框时,前一个下拉框的值决定了下一个下拉框的值,新增操作时通过onSelect事件(或onChange事件)可以很好地处理。但是编辑操作时,有一个数据回显过程,存在下拉框的 data加载 和下拉框的选定交叉执行的过程,即:
1.加载第一个下拉框的data
2,选定第一个下拉框的值
3.加载第二个下拉框的data
4.选定第二个下拉框的值
5.加载第三个下拉框的data
6.选定第三个下拉框的值
这种情况下直接加载下拉框的data,并且进行赋值,会出现第二个以后的下拉框无法回显的问题。
解决思路如下(例子使用jQuery combobox演示):
1.定义两个全局变量(根据下拉框的级联个数而定,三个级联就定义两个变量):
var editWrktId,editSitId;
2.第一级下拉框直接加载好,并配置onSelect事件(值被选定),第一级值被选定后加载第二级下拉框的data:
$("#add_proc").combobox({
url: ctx + '/combo.do?action=getProc',
method:'get',
valueField:'id',
textField:'text',
editable: true,
limitToList: true,
panelHeight:'300px',
onSelect:function(record){
let process = record.id;
$("#add_wrkt").combobox('clear');
$("#add_sit").combobox('clear');
$("#add_wrkt").combobox('loadData', []);
$("#add_sit").combobox('loadData', []);
$("#add_wrkt").combobox({
url: ctx + '/combo.do?action=getWrkt&proc='+proc,
method:'get',
valueField:'id',
textField:'text',
editable: false,
panelHeight:'300px',
});
}
});
3.第二级下拉框添加onLoadSuccess事件(data加载完成)及onSelect事件(值被选定),onLoadSuccess事件用于data加载完毕后设置选定值,onSelect事件用于 设置第二级的选定值后 加载第三级的data:
$("#add_proc").combobox({
url: ctx + '/combobox.do?action=getProc',
method:'get',
valueField:'id',
textField:'text',
editable: true,
limitToList: true,
panelHeight:'300px',
onSelect:function(record){
let proc = record.id;
$("#add_wrkt").combobox('clear');
$("#add_sit").combobox('clear');
$("#add_wrkt").combobox('loadData', []);
$("#add_sit").combobox('loadData', []);
$("#add_wrkt").combobox({
url: ctx + '/combo.do?action=getWrkS&proc='+proc,
method:'get',
valueField:'id',
textField:'text',
editable: false,
panelHeight:'300px',
onLoadSuccess:function(){
if (editWrktId) {
$("#add_wrkt").combobox("setValue",editWrkt);
}
},
onSelect:function(record){
let wrktId = record.id;
$("#add_sit").combobox('clear');
$("#add_sit").combobox('loadData', []);
$("#add_sit").combobox({
url: ctx + '/combo.do?action=getSit&wrkt='+wrktId,
method:'get',
valueField:'id',
textField:'text',
editable: false,
panelHeight:'300px',
});
}
});
}
});
4.给第三级下拉框添加onLoadSuccess事件(data加载完毕),用于设置第三级的选定值。
$("#add_proc").combobox({
url: ctx + '/combo.do?action=getProc',
method:'get',
valueField:'id',
textField:'text',
editable: true,
limitToList: true,
panelHeight:'300px',
onSelect:function(record){
let procId = record.id;
$("#add_wrkt").combobox('clear');
$("#add_sit").combobox('clear');
$("#add_wrkt").combobox('loadData', []);
$("#add_sit").combobox('loadData', []);
$("#add_wrkt").combobox({
url: ctx + '/combo.do?action=getWrkt&proc='+procId,
method:'get',
valueField:'id',
textField:'text',
editable: false,
panelHeight:'300px',
onLoadSuccess:function(){
if (editWrktId) {
$("#add_wrkt").combobox("setValue",editWrktId);
}
},
onSelect:function(record){
let wrktId = record.id;
$("#add_sit").combobox('clear');
$("#add_sit").combobox('loadData', []);
$("#add_sit").combobox({
url: ctx + '/combo.do?action=getSit&wrkt='+wrktId,
method:'get',
valueField:'id',
textField:'text',
editable: false,
panelHeight:'300px',
onLoadSuccess:function(){
if (editSitId) {
$("#add_sit").combobox("setValue",editSitId);
}
}
});
}
});
}
});
关键点:
1.除了最后一级外,每一级都需要设置onSelect事件,用于加载下一级的data。
2.除了第一级外,每一级都需要设置onLoadSuccess事件,用于设置本级的选定值。
3.级联n个下拉框,需要n-1个全局变量,用于存储除第一级外的下拉框选定值。
4.打开编辑窗口时,首先给上一步中的全局变量赋值,然后给包括第一级下拉框在内的回显元素赋值。
5.打开新增窗口时,首先清除全局变量的值,以免影响新增数据(如果新增窗口和编辑窗口公用一个弹窗时,需要执行这一步)。
以上的操作逻辑就是:
加载第一级data——》设置第一级的值——》加载第二级data——》设置第二级的值——》加载第三级的data——》设置第三级的值……