jQuery는 EasyUi를 사용하여 3단계 연결 드롭다운 상자 효과 예제 공유를 실현합니다.

小云云
풀어 주다: 2018-01-23 10:07:23
원래의
2371명이 탐색했습니다.

이 글에서는 주로 EasyUi를 사용하여 3단계 연결 효과를 구현하는 방법을 소개합니다. EasyUi를 사용하여 3단계 연결 기술을 구현하는 예는 매우 실용적이므로 모든 사람에게 도움이 될 수 있습니다.

다른 것은 말할 것도 없고, easyui를 사용하여 3단계 연결을 달성하는 것은 주로 레이어별 코드를 살펴보겠습니다.

html form


<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: &#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 
});
로그인 후 복사

관련 추천:

Ajax 제품 분류의 3단계 연결을 위한 간단한 구현 방법

jquery와 ajax는 캡슐화와 비캡슐화 두 가지 방법으로 지방자치단체의 3단계 연결을 구현할 수 있습니다

도, 자치단체 3단계 연계 기능 구현 예시 (php+MySql+Ajax+jQuery)


위 내용은 jQuery는 EasyUi를 사용하여 3단계 연결 드롭다운 상자 효과 예제 공유를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!