Heim > Artikel > Web-Frontend > jQuery verwendet EasyUi, um die gemeinsame Nutzung von Beispielen für Drop-Down-Box-Effekte auf drei Ebenen zu realisieren

jQuery verwendet EasyUi, um die gemeinsame Nutzung von Beispielen für Drop-Down-Box-Effekte auf drei Ebenen zu realisieren

小云云Original: 2018-01-23 10:07:232372Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung von EasyUi zur Erzielung von Verknüpfungseffekten auf drei Ebenen vorgestellt. Ich hoffe, dass Freunde, die es benötigen, darauf verweisen können es kann jedem helfen.

Ganz zu schweigen davon, dass die Verwendung von easyui zum Erreichen einer dreistufigen Verknüpfung hauptsächlich darin besteht, Schicht für Schicht zu implementieren

HTML-Formular

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

easyUis 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 
});

Verwandte Empfehlungen:

Eine einfache Implementierungsmethode für die dreistufige Verknüpfung der Ajax-Produktklassifizierung

jquery und Ajax können die dreistufige Verknüpfung von Provinzen und Gemeinden auf zwei Arten realisieren: Kapselung und Nichtkapselung

Beispiel für die Realisierung der dreistufigen Verknüpfungsfunktion von Provinzen und Gemeinden (php+MySql+Ajax+jQuery)

Das obige ist der detaillierte Inhalt vonjQuery verwendet EasyUi, um die gemeinsame Nutzung von Beispielen für Drop-Down-Box-Effekte auf drei Ebenen zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des asynchronen Ladens untergeordneter Knoten im JQuery EasyUI-BaumNächster Artikel：Detaillierte Erläuterung des asynchronen Ladens untergeordneter Knoten im JQuery EasyUI-Baum

In Verbindung stehende Artikel

Mehr sehen