easyui combobox 3个下拉框级联新增显示,修改回显
前言
在实际项目中,有这么一个需求,3个下拉框选项是属于级联级别的,新增时:当选中第1个下拉框的值时,第二个下拉框根据第一下拉框中的类型查询数据,当第二个下拉框选中值时查询第三个下拉框的值并回显,修改时:回显选中第一个下拉框值,然后查询第二个下拉框并回显,然后查询第三个下拉框并回显(啰里啰嗦一大堆,千万不要蒙,接下来看图)
代码 (新增和修改使用同一个函数)
//所有类型加载
function eventAllTypeLoad(params){
//案件类型
$('.event_type').combobox({
url:'www.baidu.com/hehe/do?type=1021',
valueField:'code',
textField:'text' ,
panelHeight:'80px',
editable:false,
/*data:[{
id:91,
text:"事件"
},{
id:92,
text:"单位"
},{
id:93,
text:"部件"
}],*/
onSelect:function(record){
//案件大类
$(".event_big_type").combobox({
url:'www.baidu.com/hehe.do?type='+record.id,
valueField: 'code',
textField: 'text',
editable:false,
onSelect:function(record){
console.log(record)
//案件小类
$(".event_small_type").combobox({
url:'www.baidu.com/hehe.do?type='+record.id,
valueField: 'code',
textField: 'text',
editable:false,
onLoadSuccess: function (){
if (params!=null&¶ms.event_small_type!=null) {
$(".event_small_type").combobox('select',params.event_small_type);
params = {};
}
}
});
},
onLoadSuccess: function (){
if (params!=null&¶ms.event_big_type!=null) {
$(".event_big_type").combobox('select',params.event_big_type);
}
}
});
},
onLoadSuccess: function (){
if (params!=null&¶ms.event_type!=null) {
$(".event_type").combobox('select',params.event_type);
}
}
});
}
其中函数的参数params是用来修改时赋值的,如果只是添加则不用使用combobox中的onLoadSuccess
修改时的参数params
var typeParams = {};
typeParams.event_type = row.event_type;
typeParams.event_big_type = row.event_big_type;
typeParams.event_small_type = row.event_small_type;
//类别选中
eventAllTypeLoad(typeParams);
添加时的参数params
//所有类型案件类型
eventAllTypeLoad(null);