jQuery EasyUI 組件加上“清除”功能實例詳解

2019-11-19 16:52:01

字體：大中小

來源：轉載

供稿：網友

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