为Jquery EasyUI 组件加上清除功能的方法(详解)


Posted in jQuery onApril 13, 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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 #jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 #jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 #jQuery
jQuery用noConflict代替$的实现方法
Apr 12 #jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 #jQuery
jquery 校验中国身份证号码实例详解
Apr 11 #jQuery
基于jQuery实现瀑布流页面
Apr 11 #jQuery
You might like
再说下636单管机
2021/03/02 无线电
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
python实现识别相似图片小结
2016/02/22 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
python读取图片任意范围区域
2019/01/23 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Python hashlib模块实例使用详解
2019/12/24 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
python3让print输出不换行的方法
2020/08/24 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
美国第一香水网站:Perfume.com
2017/01/23 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
法制宣传实施方案
2014/03/13 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python