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 29 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
详解jQuery-each()方法
Mar 13 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery实现上传图片功能
Jun 29 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php中常用编辑器推荐
2007/01/02 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
新闻内页-JS分页
2006/06/07 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
Django的数据模型访问多对多键值的方法
2015/07/21 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
python实现实时视频流播放代码实例
2020/01/11 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
药学专业个人自我评价
2013/11/11 职场文书
团日活动总结
2014/04/28 职场文书
社会实践评语
2014/04/28 职场文书
大学学生个人总结
2015/02/15 职场文书
鉴史问廉观后感
2015/06/10 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
DE1107机评
2022/04/05 无线电
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL