首页 / JQUERY / 为JqueryEasyUI组件加上清除功能实例分享

为JqueryEasyUI组件加上清除功能实例分享

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了为JqueryEasyUI组件加上清除功能实例分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5759字，纯文字阅读大概需要9分钟。

内容图文

本文主要为大家带来一篇为Jquery EasyUI 组件加上清除功能的方法(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

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）有值时的情况（其中类型是数据列表下拉框）

为JqueryEasyUI组件加上清除功能实例分享 - 文章图片

（2）无值时的情况

为JqueryEasyUI组件加上清除功能实例分享 - 文章图片

内容总结

以上是互联网集市为您收集整理的为JqueryEasyUI组件加上清除功能实例分享全部内容，希望文章能够帮你解决为JqueryEasyUI组件加上清除功能实例分享所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/295940.html

来源：【匿名】

【上一篇】Jquery-data的三种用法实例分析【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【为JqueryEasyUI组件加上清除功能实例分享】教程文章相关的互联网学习教程文章

jquery 全选功能

1.直接全选（复选框名字要统一）<input type="CHECKBOX" id="cbSelectAll" onclick="$(‘input[name=privilegeIds]‘).attr(‘checked‘,this.checked)"/> <label for="cbSelectAll">全选</label> <ul id="privilegeTree"> <s:iterator value="privilegeList"> <li> <input id="cb_${id }" <s:property value="id in privilegeIds ? ‘checked‘ : ‘‘ "/> value...

jQuery来源学习笔记：扩展的实用功能

// 扩展的实用功能 jQuery.extend({// http://www.w3school.com.cn/jquery/core_noconflict.asp// 释放$的 jQuery 控制权// 很多 JavaScript 库使用 $ 作为函数或变量名，jQuery 也一样。// 在 jQuery 中，$ 仅仅是 jQuery 的别名，因此即使不使用 $ 也能保证全部功能性。// 假如我们须要使用 jQuery 之外的还有一 JavaScript 库，我们能够通过调用 $.noConflict() 向该库返回控制权。// 通过向该方法传递參数 true，我们能够将 $ ...

jQuery实现类似微博定时刷新提示新消息的功能【代码】

1.引入jQuery文件2.添加jquery.refresh.js文件，代码如下： 1/**2 * Created by Silver on 2015/11/27.3*/ 4 5 (function ($) {6 $.refreshData = function (options) {7var defaults = {8 url: ‘/order/ajax_new_count‘,//提交的地址 9 contentData: {}, 10 time: 15, 11 home: false12 }; 13var opts = $.extend({}, defaults, options); 1415 $.refreshDat...

Jquery 复制功能【代码】

使用clipboardjs插件实现鼠标点击复制功能；官网：https://clipboardjs.com/使用示例:1.引入<script type="text/javascript" th:src="@{/static/js/clipboard.min.js}"></script>2.按钮元素:<button class="btn" onlick="copyBtn();">点击复制<button/>function copyBtn() {new ClipboardJS(‘.btn‘,{ text:function(trigger) { return ‘这里是复制的文本信息‘; } });}原文：https://www.cnblogs.com/dwb91/p/10400093.h...

jquery实现替代iframe的功能【代码】

原文:jquery实现替代iframe的功能使用iframe能很好的嵌入其他的网页或者网站，但是iframe每次加载都会浪费好多的时间，且会阻止其他元素的加载，搜索引擎也不能识别页面ifram框架中被调用的链接、文本、图片等等内容的。Html代码<ul class="list-side"><li><a target="a.html" >about</a></li><li><a target="b.html" >news</a></li><li><a target="c.html" >product</a></li><li><a href="http://ucmic.blogspot.com/" target="_b...

jquery datatables 添加跳转到指定页功能【代码】

项目中使用了jquery datatables 作为我们的数据表格组件，但是分页上没有跳转到指定页，需要自己重新写。解决方法如下：在设置dataTables的默认属性里设置它的drawCallback方法来在后面拼接跳转元素，本方法是datatables 1.10往后的版本本代码是针对spring mybatis pageHelper插件返回的PageInfo来进行处理的，返回的结构是{success:true, data : pageInfo},如果只是看自定义跳转，只需要看里面的drawCallback方法/*** 设置jquery ...

jquery的功能函数【代码】

1.$.boxModel<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script>var sBox = $.boxModel ? "标准W3C":"IE"; document.write("您的页面目前支持："+sBox+"盒子模型"); </script> </head> <body></body> </html>运行结果:您的页面目前支持：IE盒子模型 2.$.each() 遍历<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script>var aArray = [...

Jquery图片上传功能整理【代码】【图】

最近在做一个图片上传到服务器的功能，之前基本没有什么JS的经验，用的也是网上的插件。做了一个星期才把他弄好，现在做一下总结，方便以后查看。用的插件是WebUploader，上面有很多例子，我找的例子如下图：在实例化WebUploader的时候需要修改upload.js文件中的server的地址，这样才能将指定的图片上传到服务器代码如下：// 实例化uploader = WebUploader.create({pick: {id: ‘#filePicker‘,label: ‘点击选择图片‘},formDat...

Jquery LigerUI框架学习（二）之Tree于Tab标签实现iframe功能【代码】

LigerUI框架Tree于Tab标签动态使用，当点击Tree后动态创建Tab标签，和通常用的iframe框架功能类似Tree中的关键代码//Tree初始化$("#tree1").ligerTree({nodeWidth: 112, //Tree控件宽度data: createData(), //Tree数据源checkbox: false, //是否使用CheckboxidFieldName: ‘id‘, //绑定idisExpand: 2, //是否展开节点 FALSE为不展开 TRUE展示所有节点指定数字为展开指定节点slide: false, //节点展开效果False无效果 TRUE缓慢展开...

jquery实现文本框数量加减功能的例子分享【代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>js数量加减</title><script type="text/javascript" src="http://www.jb51.net/Public/js/jquery.min.js"></script><script type="text/javascript"> $(function(){$(...

jQuery主要功能简析【代码】

获取元素jQuery的基本设计思想和主要用法，就是选择某个网页元素，然后对其进行操作。 css选择器$(document) 选择整个文档 $(‘#myId‘) 选择id为#id的网页元素 $(‘div.myClass‘) 选择class为myClass的选择器 $(‘input[name=mine]‘) 选择name属性等于mine的input元素 jQuery特有的表达式$(‘a:firt‘) 选择网页第一个a元素 $(‘tr:odd‘) 选择表格的奇数行 $(‘#myForm :input‘)选择表单中的input元素 $(‘div:visible‘) 选择...

jQuery_通过遮罩层和滑动块实现一个信息提示功能

原文：http://www.blogjava.net/produ/archive/2015/03/25/423827.html

自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7【代码】

版权声明：本文为博主原创文章，未经博主同意不得转载。 https://blog.csdn.net/u010480479/article/details/25159287 本屌丝近期工作要求重写站点全部代码，so...极其蛋疼的事情出现了。管我的人要求不能用网上的插件。oh~~~my god!! 这是多么能让千万仅仅草原上的马儿奔腾的要求~~~先实现一个比較简单的功能：需求：网页遮罩层/弹出层。兼容IE6幸好本屌丝曾经聪明收集了个js的版本号，so。自己改写成了jQuery插件形式的，...

jQuery Validate插件实现表单强大的验证功能【图】

转自：http://www.jb51.net/article/76595.htm jQuery Validate插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。第一节：jQuery Validation让验证变得如此容易一、官网下载jquery，和jquery validation plugin 二、引入文件<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <scr...

html+css+jQuery+JavaScript实现tab自动切换功能【代码】

tab1.html内容<!DOCTYPE html><html><head><meta charset="UTF-8"><title>tab选项卡</title><style>* {margin: 0;padding: 0;}ul,li {list-style: none;}body {background-color: #323232;font-size: 12px;font-family: "微软雅黑"; margin: 100px;}</style><link rel="stylesheet" href="tab1.css"/><script src="../jquery-2.1.0.js" type="text/javascript"></script><script src="tab1.js" type="text/javascript"></script></...

首页 / JQUERY / 为JqueryEasyUI组件加上清除功能实例分享

为JqueryEasyUI组件加上清除功能实例分享

内容导读

内容图文

内容总结

内容备注

内容手机端

【为JqueryEasyUI组件加上清除功能实例分享】教程文章相关的互联网学习教程文章

功能 - 相关标签

实例 - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程