快捷導(dǎo)航

jQuery使用EasyUi實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)下拉框效果

更新時(shí)間：2017年03月08日 10:53:25 作者：火線速遞

本篇文章主要介紹了jQuery使用EasyUi實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果，實(shí)例使用EasyUi實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)技巧，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。

其它的都不說，使用easyui實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)主要就是一層套一層，大家且看代碼

html表單

<input id="txtPipeRowName" style="width:150px;">    
<input id="txtPipeName" style="width:150px;">

easyUi的Combobox:

// 一層Combo 
var srmCombx = $("#txtShouName")combobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+selectSgId+'', 
dataType: 'json', 
success: function(data){ 
dataunshift({equipmentid:'',equipmentname:'全部'}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  onSelect:function(record){ //onSelect 用戶點(diǎn)擊時(shí)觸發(fā)的事件 在此的意義在于，用戶點(diǎn)擊一級(jí)后自動(dòng)二級(jí)combobox 
  piperowCombxcombobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtShouName")combobox("getValue")+'', 
dataType: 'json', 
success: function(data){ 
dataunshift({equipmentid:'',equipmentname:'全部'}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  onSelect:function(record){ //這里也使用了onSelect事件，在二級(jí)combobox被用戶點(diǎn)擊時(shí)觸發(fā)三級(jí)combobox 
  pipeCombxcombobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtPipeRowName")combobox("getValue")+'', 
dataType: 'json', 
success: function(data){ 
dataunshift({equipmentid:'',equipmentname:'全部'}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
}); 
  }, 
  onLoadSuccess:function(){ //清空三級(jí)下拉框 就是成功加載完觸發(fā)的事件 當(dāng)一級(jí)combobox改變時(shí)，二級(jí)和三級(jí)就需要清空 
  pipeCombxcombobox("clear"); 
  pipeCombxcombobox('setValue', '全部'); //給combobox下拉框設(shè)置一個(gè)值，否則為空不好看 
  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
})combobox("clear"); //清空二級(jí)下拉框 
 
  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
}); 
/*******************************/ 
//下面的倆個(gè)是組件， 
 
// 二層Combo 
var piperowCombx = $("#txtPipeRowName")combobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtShouName")combobox("getValue")+'', 
dataType: 'json', 
success: function(data){ 
dataunshift({equipmentid:'',equipmentname:'全部'}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
}); 
 
//三層Combo 
var pipeCombx=$("#txtPipeName")combobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtPipeRowName")combobox("getValue")+'', 
dataType: 'json', 
success: function(data){ 
dataunshift({equipmentid:'',equipmentname:'全部'}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: