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

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

小云云

Freigeben： 2018-01-23 10:07:23

Original

2371 Leute haben es durchsucht

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;">

Nach dem Login kopieren

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

Nach dem Login kopieren

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!