jQuery使用EasyUi实现三级联动下拉框效果


Posted in Javascript onMarch 08, 2017

其它的都不说,使用easyui实现三级联动主要就是一层套一层,大家且看代码

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 用户点击时触发的事件 在此的意义在于,用户点击一级后自动二级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事件,在二级combobox被用户点击时触发三级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(){ //清空三级下拉框 就是成功加载完触发的事件 当一级combobox改变时,二级和三级就需要清空 
  pipeCombxcombobox("clear"); 
  pipeCombxcombobox('setValue', '全部'); //给combobox下拉框设置一个值,否则为空不好看 
  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
})combobox("clear"); //清空二级下拉框 
 
  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
}); 
/*******************************/ 
//下面的俩个是组件, 
 
// 二层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 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
jQuery实现跨域
Feb 03 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 #Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 #Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 #Javascript
原生js实现放大镜特效
Mar 08 #Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 #Javascript
正则 js分转元带千分符号详解
Mar 08 #Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 #Javascript
You might like
php三维数组去重(示例代码)
2013/11/26 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JavaScript手机振动API
2016/06/11 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
JS常见算法详解
2017/02/28 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
python编程使用协程并发的优缺点
2018/09/20 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
详解python中的lambda与sorted函数
2020/09/04 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
接受捐赠答谢词
2014/01/27 职场文书
函授药学自我鉴定
2014/02/07 职场文书
一岗双责责任书
2014/04/15 职场文书
农村党员一句话承诺
2014/05/30 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
小学中队长竞选稿
2015/11/20 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP