為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）有值時的情況（其中 類型 是數據列表下拉框）

 

（2）無值時的情況

 

 

5、進一步擴展

增加自動添加“清除”功能的函數，省去每個組件手動添加的麻煩。

（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 屬性。

 

 

（3）使用自動添加 

$(function(){
    autoAddClear(); //為各組件自動填加‘清除’功能（組件需要增加 addClear屬性 ）
    addClear4TextBox("#name",nameChangeDo); //對於需要使用OnChange事件的組件，單獨手動填加
});