为JQuery EasyUI 表单组件加上“X”功能

最新推荐文章于 2021-10-06 18:38:45 发布

付月半子

最新推荐文章于 2021-10-06 18:38:45 发布

阅读量362

点赞数 1

分类专栏： js EasyUI

本文链接：https://blog.csdn.net/qq_34169240/article/details/80911232

版权

js 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

EasyUI

19 篇文章 0 订阅

订阅专栏

【core.js---------】

/*
 * 为‘日期时间选择框’添加‘清除’图标
 * 该实现使用了 onChange 事件，如果用户需要该事件，可传入自定义函数，会自动回调 。
 */
function addClear4Datetimebox(theId){
	$(theId).datetimebox({
	    //值改变时，根据值，确定是否显示清除图标
	     onChange:function(newDate, oldDate){
	     	var bdt= $(theId);
	    	var value=bdt.datetimebox('getValue');
			if (value!=null){
	             	bdt.datetimebox({
	             		value: newDate,
	                	icons:[{
	                		iconCls:'fa fa-times',
	                		handler: function(e){
	                			$(e.data.target).datetimebox('clear');
	                			$(e.data.target).datetimebox({icons:[]});    
	                		}
	                	}]   
	                });
	    	}else{
	            $(theId).datetimebox({
	            	icons:[]   
	            }); 
	    	}
	    }    	
	}); 
}

//自动填加清除功能 （组件需要增加 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-datetimebox") != -1 )
        {//日期选择框
            addClear4Datetimebox("#"+theId);
        }        
    }
}

【JSP---】

$(function(){    
	 autoAddClear();//日期控件  自动填加清除功能 （组件需要增加 addClear属性 ）
});

开始时间: <input addClear id="BeginDataTime" name="BeginDataTime" editable="false" class="easyui-datetimebox" 
                             style="width:160px;background-color: blue;" >

//置空选择条件BeginDataTime EndDataTime
ParamValue.DataTimeClear = function () {
$('#BeginDataTime').datetimebox('setValue', null);
$('#BeginDataTime').datetimebox({
icons:[]
});
$('#EndDataTime').datetimebox('setValue', null);
$('#EndDataTime').datetimebox({
icons:[]
});
}