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设置图片等比例缩小的方法
Apr 29 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery实现简单轮播图效果
Dec 27 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中的日期处理方法集锦
2007/01/02 PHP
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
在Django框架中编写Context处理器的方法
2015/07/20 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python中类的属性和方法介绍
2018/11/27 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python实现简单坦克大战
2020/03/27 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
python中altair可视化库实例用法
2021/01/26 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
团员的自我评价
2013/12/01 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
校长师德表现自我评价
2015/03/05 职场文书
义卖募捐活动总结
2015/05/09 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
考研经验交流会策划书
2015/11/02 职场文书
2019年个人工作总结范文
2019/03/25 职场文书