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 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
Seajs源码详解分析
Apr 02 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 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+javascript模拟Matrix画面
2006/10/09 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
删除节点的jquery代码
2014/01/13 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
浅析JS运动
2015/12/28 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
python编写暴力破解FTP密码小工具
2014/11/19 Python
python实现挑选出来100以内的质数
2015/03/24 Python
Python中字典映射类型的学习教程
2015/08/20 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python2随机数列生成器简单实例
2017/09/04 Python
python之生产者消费者模型实现详解
2019/07/27 Python
python获取Linux发行版名称
2019/08/30 Python
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
应届实习生的自我评价范文
2014/01/05 职场文书
小学评语大全
2014/04/22 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
春节慰问信范文
2015/02/15 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS