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利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
javascript简易画板开发
Apr 12 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 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 文件上传类代码
2011/08/06 PHP
php计算税后工资的方法
2015/07/28 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Javascript读取cookie函数代码
2010/10/16 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
利用aardio给python编写图形界面
2017/08/21 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
详解Python中的正则表达式
2018/07/08 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
英国电信商店:BT Shop
2019/12/17 全球购物
小学三八妇女节活动方案
2014/03/16 职场文书
办理房产证委托书
2014/09/18 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers