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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
JQuery animate动画应用示例
May 14 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
Javascript实现单例模式
2016/01/24 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python验证码识别的方法
2015/07/10 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python 修改列表中的元素方法
2018/06/26 Python
python中with用法讲解
2020/02/07 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
编写python代码实现简单抽奖器
2020/10/20 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
解除劳动合同协议书
2014/04/14 职场文书
金融与证券专业求职信
2014/06/22 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
python如何正确使用yield
2021/05/21 Python
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python