search

Home >Web Front-end >JS Tutorial >jQuery uses EasyUi to realize three-level linkage drop-down box effect example sharing

jQuery uses EasyUi to realize three-level linkage drop-down box effect example sharing

小云云
小云云Original
2018-01-23 10:07:232406browse

This article mainly introduces jQuery's use of EasyUi to achieve three-level linkage effects. Examples of using EasyUi to achieve three-level linkage techniques are very practical. Friends in need can refer to it. I hope it can help everyone.

Not to mention anything else, using easyui to achieve three-level linkage is mainly to layer one layer inside another. Let’s take a look at the code

html form


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

easyUi's Combobox:


// 一层Combo 
var srmCombx = $("#txtShouName")combobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: &#39;${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id=&#39;+selectSgId+&#39;&#39;, 
dataType: &#39;json&#39;, 
success: function(data){ 
dataunshift({equipmentid:&#39;&#39;,equipmentname:&#39;全部&#39;}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  onSelect:function(record){ //onSelect 用户点击时触发的事件 在此的意义在于，用户点击一级后自动二级combobox 
  piperowCombxcombobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: &#39;${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id=&#39;+$("#txtShouName")combobox("getValue")+&#39;&#39;, 
dataType: &#39;json&#39;, 
success: function(data){ 
dataunshift({equipmentid:&#39;&#39;,equipmentname:&#39;全部&#39;}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  onSelect:function(record){ //这里也使用了onSelect事件，在二级combobox被用户点击时触发三级combobox 
  pipeCombxcombobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: &#39;${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id=&#39;+$("#txtPipeRowName")combobox("getValue")+&#39;&#39;, 
dataType: &#39;json&#39;, 
success: function(data){ 
dataunshift({equipmentid:&#39;&#39;,equipmentname:&#39;全部&#39;}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  valueField: &#39;equipmentid&#39;,   
  textField: &#39;equipmentname&#39;, 
  value:&#39;&#39;, 
  editable:false 
}); 
  }, 
  onLoadSuccess:function(){ //清空三级下拉框 就是成功加载完触发的事件 当一级combobox改变时，二级和三级就需要清空 
  pipeCombxcombobox("clear"); 
  pipeCombxcombobox(&#39;setValue&#39;, &#39;全部&#39;); //给combobox下拉框设置一个值，否则为空不好看 
  }, 
  valueField: &#39;equipmentid&#39;,   
  textField: &#39;equipmentname&#39;, 
  value:&#39;&#39;, 
  editable:false 
})combobox("clear"); //清空二级下拉框 
 
  }, 
  valueField: &#39;equipmentid&#39;,   
  textField: &#39;equipmentname&#39;, 
  value:&#39;&#39;, 
  editable:false 
}); 
/*******************************/ 
//下面的俩个是组件， 
 
// 二层Combo 
var piperowCombx = $("#txtPipeRowName")combobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: &#39;${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id=&#39;+$("#txtShouName")combobox("getValue")+&#39;&#39;, 
dataType: &#39;json&#39;, 
success: function(data){ 
dataunshift({equipmentid:&#39;&#39;,equipmentname:&#39;全部&#39;}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  valueField: &#39;equipmentid&#39;,   
  textField: &#39;equipmentname&#39;, 
  value:&#39;&#39;, 
  editable:false 
}); 
 
//三层Combo 
var pipeCombx=$("#txtPipeName")combobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: &#39;${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id=&#39;+$("#txtPipeRowName")combobox("getValue")+&#39;&#39;, 
dataType: &#39;json&#39;, 
success: function(data){ 
dataunshift({equipmentid:&#39;&#39;,equipmentname:&#39;全部&#39;}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  valueField: &#39;equipmentid&#39;,   
  textField: &#39;equipmentname&#39;, 
  value:&#39;&#39;, 
  editable:false 
});

Related recommendations:

Ajax products Simple implementation method of classified three-level linkage

jquery and ajax realize three-level linkage of provinces and cities in two ways, encapsulation and non-encapsulation

Provinces and cities Example of implementation of district three-level linkage function (php+MySql+Ajax+jQuery)


The above is the detailed content of jQuery uses EasyUi to realize three-level linkage drop-down box effect example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of jquery easyui tree asynchronous loading of child nodesNext article：Detailed explanation of jquery easyui tree asynchronous loading of child nodes

Related articles

See more