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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
常用jQuery选择器总结
Jul 11 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
关于React动态加载路由处理的相关问题
Jan 07 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变量引用的面试题
2010/08/08 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php二维数组排序详解
2013/11/06 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
python控制台中实现进度条功能
2015/11/10 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
一张图带我们入门Python基础教程
2017/02/05 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
函数指针的定义是什么
2016/08/14 面试题
军训 自我鉴定
2014/02/03 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
九年级数学教学反思
2016/02/17 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
Java线程的6种状态与生命周期
2022/05/11 Java/Android