jQuery EasyUI 组件加上“清除”功能实例详解


Posted in jQuery onApril 11, 2017

1、背景

    在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框)、DateBox(日期输入框)、DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择、不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空。经过研究,可以用一个变通的解决方案:给组件加上一个“清除”按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮。

2、函数定义

定义JS方法,为 EasyUI 中一些常用组件添加'清除'按钮及功能。共计6个:

/*
 * 为‘文本框'列表添加‘清除'图标
 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。
 */
function addClear4TextBox(theId,onChangeFun)
{
 var theObj = $(theId);
 //根据当前值,确定是否显示清除图标
 var showIcon = function(){  
  var icon = theObj.textbox('getIcon',0);
  if (theObj.textbox('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 theObj.textbox({
  //添加清除图标
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.textbox('clear');
   }
  }],
  //值改变时,根据值,确定是否显示清除图标
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
 }); 
 //根据目前值,确定是否显示清除图标
 showIcon();
}
/*
 * 为‘下拉列表框'添加‘清除'图标
 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。
 */
function addClear4Combobox(theId,onChangeFun)
{
 var theObj = $(theId);
 //根据当前值,确定是否显示清除图标
 var showIcon = function(){  
  var icon = theObj.combobox('getIcon',0);
  if (theObj.combobox('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 theObj.combobox({
  //添加清除图标
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.combobox('clear');
   }
  }],
  //值改变时,根据值,确定是否显示清除图标
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
 }); 
 //初始化确认图标显示
 showIcon();
}
/*
 * 为‘数据表格下拉框'添加‘清除'图标
 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。
 */
function addClear4Combogrid(theId,onChangeFun)
{
 var theObj = $(theId);
 //根据当前值,确定是否显示清除图标
 var showIcon = function(){  
  var icon = theObj.combogrid('getIcon',0);
  if (theObj.combogrid('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 theObj.combogrid({
  //添加清除图标
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.combogrid('clear');
   }
  }],
  //值改变时,根据值,确定是否显示清除图标
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
 }); 
 //初始化确认图标显示
 showIcon();
}
/*
 * 为‘数值输入框'添加‘清除'图标
 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。
 */
function addClear4Numberbox(theId,onChangeFun)
{
 var theObj = $(theId);
 //根据当前值,确定是否显示清除图标
 var showIcon = function(){  
  var icon = theObj.numberbox('getIcon',0);
  if (theObj.numberbox('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 theObj.numberbox({
  //添加清除图标
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.numberbox('clear');
   }
  }],
  //值改变时,根据值,确定是否显示清除图标
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
 }); 
 //初始化确认图标显示
 showIcon();
}
/*
 * 为‘日期选择框'添加‘清除'图标
 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。
 */
function addClear4Datebox(theId,onChangeFun)
{
 var theObj = $(theId);
 //根据当前值,确定是否显示清除图标
 var showIcon = function(){  
  var icon = theObj.datebox('getIcon',0);
  if (theObj.datebox('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 theObj.datebox({
  //添加清除图标
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.datebox('clear');
   }
  }],
  //值改变时,根据值,确定是否显示清除图标
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
 }); 
 //初始化确认图标显示
 showIcon();
}
/*
 * 为‘日期时间选择框'添加‘清除'图标
 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。
 */
function addClear4Datetimebox(theId,onChangeFun)
{
 var theObj = $(theId);
 //根据当前值,确定是否显示清除图标
 var showIcon = function(){  
  var icon = theObj.datetimebox('getIcon',0);
  if (theObj.datetimebox('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 theObj.datetimebox({
  //添加清除图标
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.datetimebox('clear');
   }
  }],
  //值改变时,根据值,确定是否显示清除图标
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
 }); 
 //初始化确认图标显示
 showIcon();
}

3、使用

用法格式如下:

(1)addClear4TextBox("#name",nameChangeDo); //文本框,同时传入了回调函数

(2)addClear4Combobox("#state\\.id"); //下拉列表框

(3)addClear4Combogrid("#type\\.id"); //数据表格下拉框

(4)addClear4Numberbox("#intNum2"); //数值输入框

(5)addClear4Datebox("#theDate2"); //日期选择框

(6)addClear4Datetimebox("#theTime2"); //日期选择框

注:函数的实现使用了 onChange 事件,如果需要使用该事件执行某些操作,可传入自定义函数,会自动回调 ,参见(1)。

<script>
//名称改变时执行的一些操作。(演示清除操作回调)
var nameChangeDo = function(){
 //alert("改变了...");
}
$(function(){ 
 addClear4TextBox("#code");
 addClear4TextBox("#name",nameChangeDo);
 addClear4Combobox("#city");
 addClear4Combobox("#state\\.id");
 addClear4Combogrid("#type\\.id");
 addClear4Combobox("#hobby");
 addClear4Numberbox("#intNum2");
 addClear4Numberbox("#doubleNum1");
 addClear4Numberbox("#doubleNum2");
 addClear4Datebox("#theDate2");
 addClear4Datetimebox("#theTime2");
 addClear4TextBox("#remark"); 
});
</script>

4、效果展示

(1)有值时的情况(其中 类型 是数据列表下拉框)

jQuery EasyUI 组件加上“清除”功能实例详解

(2)无值时的情况

jQuery EasyUI 组件加上“清除”功能实例详解

以上所述是小编给大家介绍的jQuery EasyUI 组件加上“清除”功能实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
如何编写jquery插件
Mar 29 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 #jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 #jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 #jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 #jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 #jQuery
利用jQuery解析获取JSON数据
Apr 08 #jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
杏林同学录(八)
2006/10/09 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
php实现微信支付之退款功能
2018/05/30 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
跟老齐学Python之Import 模块
2014/10/13 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
简单了解python模块概念
2018/01/11 Python
Python自动抢红包教程详解
2019/06/11 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
mysql有关权限的表都有哪几个
2015/04/22 面试题
行政专员岗位职责
2014/01/02 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
2014教师研修学习体会
2014/07/08 职场文书
班主任开场白
2015/06/01 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
财务年终工作总结大全
2019/06/20 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers