【转载】为JQuery EasyUI 表单组件加上“清除”功能

最新推荐文章于 2023-06-21 15:52:07 发布
最新推荐文章于 2023-06-21 15:52:07 发布
阅读量358 收藏
点赞数
分类专栏： 页面

原文：为JQuery EasyUI 表单组件加上“清除”功能

使用easyui，日期输入框等只允许选择不允许输入，但是一旦选择，无法清除，故百度找到了 “如莲家园”的《为JQuery EasyUI 表单组件加上“清除”功能》，效果很好。

在此摘抄下使用到的代码。

 

1、函数定义

/*
 * 为‘文本框’列表添加‘清除’图标
 * 该实现使用了 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();
}

2、用法

用法格式如下：

（1）addClear4TextBox("#name",nameChangeDo); //文本框,同时传入了回调函数
（2）addClear4Combobox("#state\\.id"); //下拉列表框
（3）addClear4Combogrid("#type\\.id"); //数据表格下拉框
（4）addClear4Numberbox("#intNum2"); //数值输入框
（5）addClear4Datebox("#theDate2"); //日期选择框
（6）addClear4Datetimebox("#theTime2"); //日期选择框
注：函数的实现使用了 onChange 事件，如果需要使用该事件执行某些操作，可传入自定义函数，会自动回调

4、自动添加“清除”功能的函数

（1）自动添加函数定义

//自动填加清除功能 （组件需要增加 addClear属性 ）
function autoAddClear()
{
    var arr = $("input[addClear]");
    for(var i=0;i<arr.length;i++)
    {
        var oneInput = $(arr[i]);
        var theId = oneInput.attr("id");
        theId = theId.replace('.', '\\.');
        var theClass = oneInput.attr("class");
        
        if(theClass.indexOf("easyui-textbox") != -1 )
        {//文本框
            addClear4TextBox("#"+theId);
        }
        else if(theClass.indexOf("easyui-combobox") != -1 )
        {//下拉列表框
            addClear4Combobox("#"+theId);
        }
        else if(theClass.indexOf("easyui-combogrid") != -1 )
        {//数据表格下拉框
            addClear4Combogrid("#"+theId);
        }    
        else if(theClass.indexOf("easyui-numberbox") != -1 )
        {//数值输入框
            addClear4Numberbox("#"+theId);
        }    
        else if(theClass.indexOf("easyui-datebox") != -1 )
        {//日期选择框
            addClear4Datebox("#"+theId);
        }    
        else if(theClass.indexOf("easyui-datetimebox") != -1 )
        {//日期选择框
            addClear4Datetimebox("#"+theId);
        }        
    }
}

（2）使用时，各组件上添加 addClear 属性

示例：

原本：<input class="easyui-datebox" type="text"  id = "logdate" data-options="editable:false" ></input>

修改：<input addClear class="easyui-datebox" type="text"  id = "logdate" data-options="editable:false" ></input>

（3）使用自动添加

$(function(){
    autoAddClear(); //为各组件自动填加‘清除’功能（组件需要增加 addClear属性 ）
    //addClear4TextBox("#name",nameChangeDo); //对于需要使用OnChange事件的组件，单独手动填加
});

5、效果

Oa_aY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui textbox 隐藏_EasyUI 带清除图标的文本框(TextBox with Clear Icon)_easyui demo
weixin_42227109的博客
03-05 618
TextBox with Clear IconThis example shows how to create an textbox with an icon to clear the input element itself.源代码TextBox with Clear Icon - jQuery EasyUI DemoTextBox with Clear IconThis example sho...
为Jquery EasyUI 组件加上清除功能的方法(详解)
10-20
本文将详细探讨如何为Jquery EasyUI组件添加清除功能的方法。 在Jquery EasyUI中，对于ComboBox（下拉列表框）、DateBox（日期输入框）、DateTimeBox（日期时间输入框）这些组件，通常会有只允许选择、不允许手动...
easyui 日期控件清空值
漫漫编程路，上下求索
05-10 380
版权声明：本文为博主原创文章，未经博主允许不得转载。 最近用了Easyui的日期控件datebox，项目中要将选中值清空，于是就研究了一下。      1，调用方法清空 [javascript] view plain copy print? $('#yourId').combo('setText','');            2，更改
EasyUI 输入框加入多个清除恩钮
wjsshhx的专栏
07-04 1384
EasyUI 小例子
easyui-textbox
03-26 336
TextBox 扩展自 $.fn.validatebox.defaults. 重写 $.fn.textbox.defaults. TextBox 是加强的输入控件，使我们建设表单更加快捷. 是一些复杂控件的基础控件，比如combo,datebox,spinner,等等. 依赖 validatebox linkbutton 实例 html创建方式 <in...
easyui清空按钮
houboTech的博客
08-20 2131
本文转自： http://www.cnblogs.com/rulian/p/6690326.html 1、背景 &nbsp; &nbsp; 在使用&nbsp;EasyUI 各表单组件时，尤其是使用&nbsp;ComboBox（下拉列表框）、DateBox（日期输入框）、DateTimeBox（日期时间输入框）这三个组件时，经常有这样的需求，下拉框或日期只允许选择、不允许手动...
jQuery EasyUI 组件加上“清除”功能实例详解
11-27
 在使用 EasyUI 各表单组件时，尤其是使用 ComboBox（下拉列表框）、DateBox（日期输入框）、DateTimeBox（日期时间输入框）这三个组件时，经常有这样的需求，下拉框或日期只允许选择、不允许手动输入，这时只要在...
jQuery EasyUI API 中文文档 - Form表单
10-28
综上所述，通过使用jQuery EasyUI的Form表单组件，开发者可以非常便捷地处理表单的数据提交、验证、加载等操作，并且可以通过回调函数控制更为灵活的业务逻辑。这一系列的特性使得构建动态表单变得更加简单，大大...
easyui grid 里的可编辑text 加清空图标
weixin_30794491的博客
09-06 144
$.extend($.fn.datagrid.defaults.editors, { text: { init: function (container, options) { var _opt = $('<input type="text" class="datagrid-editable-input...
easyui combobox添加清除选项按钮
wsongjun的博客
03-09 2761
<input class="easyui-combobox" name="appType" data-options=" icons:[{ iconCls:'icon-clear',
easyui使用（五）---总结与扩展
hurricane_li的博客
11-03 640
对easyui控件的操作可以从三个方面：属性，方法，事件。 通过JavaScript，或是使用html元素的data-options属性来指定easyui控件的显示： $(function(){ $("#input1").textbox('initValue','aaa');//方法要在文档加载完成之后才能调用 $("#input1"
element-plus 时间组件icon 放右边 并 清除按钮清空
最新发布
m0_65730686的博客
06-21 1156
element-plus 时间组件icon 放右边 并 清楚按钮清空
Easyui textbox清空
三斗的博客
12-24 834
$('#process').textbox('setValue',''); $('#process').textbox('clear');
easyui-textbox 清空问题
焱少的博客
09-17 1823
easyui-textbox 清空问题 $("#id").val("")不起作用后来才发现要用一下方法 var value = $("#id").textbox(‘getValue’) //获取值 $("#id").textbox(‘setValue’,’’)清空文本框 而$(’#form’).form(‘clear’);并不适用，会清除所有数据，对话框不关闭，下一个输入值无法正确获取 ...
EasyUI 基本增删改
Home Of Java------ChenDong
12-11 590
var list_url="${ctx}/admin/sys/find"; var add_url="${ctx}/admin/sys/save"; /**表格数据初始化**/ $(function(){ $('#add').form({ url: add_url, type:"POST", data: $("#add").serializeA
easyui图标对照 --由于文章历史久远, 博主放弃治疗了
热门推荐
ffiing 的博客
10-16 3万+
原作者文章地址:http://www.cnblogs.com/timememory/ 2016年2月5日 EasyUi 版本：1.4.3 虽然EasyUi提供的图标不多，不过在下眼拙，在官网中没找到图标对照文档，有时想要在某些特别设置中变化个图标有些不方便。 所以简单整理了下easyui的图标与调用类的对照关系。 <a href="###" class="easyui...
easyui datebox 扩展清空按钮
weixin_30627341的博客
06-21 102
/** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; (function ($) { var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: fu...
jQuery EasyUI基础组件：EasyLoader示例
本篇文章主要介绍了jQuery EasyUI框架中的EasyLoader组件，一个用于异步加载数据、提高用户体验的重要工具。EasyUI是基于jQuery的一个轻量级的UI库，提供了丰富的前端界面控件和组件，适用于快速构建企业级Web应用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值