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

 更新时间:2017年03月08日 10:53:25   作者:火线速递  
本篇文章主要介绍了jQuery使用EasyUi实现三级联动效果,实例使用EasyUi实现三级联动技巧,非常具有实用价值,需要的朋友可以参考下。

其它的都不说,使用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 
});

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

相关文章

  • JQuery为页面Dom元素绑定事件及解除绑定方法

    JQuery为页面Dom元素绑定事件及解除绑定方法

    这篇文章主要介绍了JQuery为页面Dom元素绑定事件及解除绑定方法,需要的朋友可以参考下
    2014-04-04
  • jQuery常用事件方法mouseenter+mouseleave+hover

    jQuery常用事件方法mouseenter+mouseleave+hover

    这篇文章主要介绍了jQuery常用事件方法mouseenter、mouseleave和hover方法,下文内容介绍详细,需要的小伙伴可以参考一下
    2022-03-03
  • 推荐40款强大的 jQuery 导航插件和教程(上篇)

    推荐40款强大的 jQuery 导航插件和教程(上篇)

    在下面的集合中,你会发现很多便利的 jQuery 导航插件和有用的教程,帮助你实现充满吸引力的网站导航,让你网站更有组织性和交互性
    2012-09-09
  • Jquery轮播效果实现过程解析

    Jquery轮播效果实现过程解析

    这篇文章主要为大家详细的分析了Jquery轮播效果实现过程的具体步骤以及实现思路,帮助大家快速实现Jquery轮播效果,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jQuery中:eq()选择器用法实例

    jQuery中:eq()选择器用法实例

    这篇文章主要介绍了jQuery中:eq()选择器用法,实例分析了:eq()选择器的功能、定义及匹配指定索引值元素时的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery代码性能优化的10种方法

    jQuery代码性能优化的10种方法

    之前,我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今,我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架,使节点选择和DOM操作变得越来越容易,如果使用不当,有可能影响整个网页的响应速度。
    2016-06-06
  • jQuery实现预加载图片的方法

    jQuery实现预加载图片的方法

    这篇文章主要介绍了jQuery实现预加载图片的方法,涉及jQuery操作img的src属性使用技巧,需要的朋友可以参考下
    2015-03-03
  • 用jQuery向div中添加Html文本内容的简单实现

    用jQuery向div中添加Html文本内容的简单实现

    下面小编就为大家带来一篇用jQuery向div中添加Html文本内容的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 设置jquery UI 控件的大小方法

    设置jquery UI 控件的大小方法

    下面小编就为大家带来一篇设置jquery UI 控件的大小方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • jQuery实现的点击图片居中放大缩小功能示例

    jQuery实现的点击图片居中放大缩小功能示例

    这篇文章主要介绍了jQuery实现的点击图片居中放大缩小功能,涉及jQuery基于事件响应针对页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01

最新评论