欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

為JqueryEasyUI組件加上清除功能的方法(詳解)

1、背景

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了平陽免費建站歡迎大家使用！

在使用 EasyUI 各表單組件時，尤其是使用 ComboBox（下拉列表框）、DateBox（日期輸入框）、DateTimeBox（日期時間輸入框）這三個組件時，經(jīng)常有這樣的需求，下拉框或日期只允許選擇、不允許手動輸入，這時只要在組件選項中加入 editable:false 就可以實現(xiàn)，但有一個問題，就是：一旦選擇了，沒辦法清空。經(jīng)過研究，可以用一個變通的解決方案：給組件加上一個“清除”按鈕，當(dāng)有值是，顯示按鈕，點擊按鈕可清空值，當(dāng)無值是，隱藏按鈕。

2、函數(shù)定義

定義JS方法，為 EasyUI 中一些常用組件添加'清除'按鈕及功能。共計6個： 

/*
 * 為‘文本框'列表添加‘清除'圖標(biāo)
 * 該實現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會自動回調(diào) 。
 */
function addClear4TextBox(theId,onChangeFun)
{
 var theObj = $(theId);
 
 //根據(jù)當(dāng)前值，確定是否顯示清除圖標(biāo)
 var showIcon = function(){  
  var icon = theObj.textbox('getIcon',0);
  if (theObj.textbox('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 
 theObj.textbox({
  //添加清除圖標(biāo)
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.textbox('clear');
   }
  }],
  
  //值改變時，根據(jù)值，確定是否顯示清除圖標(biāo)
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
  
 }); 
 
 //根據(jù)目前值，確定是否顯示清除圖標(biāo)
 showIcon();
}

/*
 * 為‘下拉列表框'添加‘清除'圖標(biāo)
 * 該實現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會自動回調(diào) 。
 */
function addClear4Combobox(theId,onChangeFun)
{
 var theObj = $(theId);
 
 //根據(jù)當(dāng)前值，確定是否顯示清除圖標(biāo)
 var showIcon = function(){  
  var icon = theObj.combobox('getIcon',0);
  if (theObj.combobox('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 
 theObj.combobox({
  //添加清除圖標(biāo)
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.combobox('clear');
   }
  }],
  
  //值改變時，根據(jù)值，確定是否顯示清除圖標(biāo)
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
  
 }); 
 
 //初始化確認圖標(biāo)顯示
 showIcon();
}


/*
 * 為‘?dāng)?shù)據(jù)表格下拉框'添加‘清除'圖標(biāo)
 * 該實現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會自動回調(diào) 。
 */
function addClear4Combogrid(theId,onChangeFun)
{
 var theObj = $(theId);
 
 //根據(jù)當(dāng)前值，確定是否顯示清除圖標(biāo)
 var showIcon = function(){  
  var icon = theObj.combogrid('getIcon',0);
  if (theObj.combogrid('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 
 theObj.combogrid({
  //添加清除圖標(biāo)
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.combogrid('clear');
   }
  }],
  
  //值改變時，根據(jù)值，確定是否顯示清除圖標(biāo)
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
  
 }); 
 
 //初始化確認圖標(biāo)顯示
 showIcon();
}

/*
 * 為‘?dāng)?shù)值輸入框'添加‘清除'圖標(biāo)
 * 該實現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會自動回調(diào) 。
 */
function addClear4Numberbox(theId,onChangeFun)
{
 var theObj = $(theId);
 
 //根據(jù)當(dāng)前值，確定是否顯示清除圖標(biāo)
 var showIcon = function(){  
  var icon = theObj.numberbox('getIcon',0);
  if (theObj.numberbox('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 
 theObj.numberbox({
  //添加清除圖標(biāo)
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.numberbox('clear');
   }
  }],
  
  //值改變時，根據(jù)值，確定是否顯示清除圖標(biāo)
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
  
 }); 
 
 //初始化確認圖標(biāo)顯示
 showIcon();
}

/*
 * 為‘日期選擇框'添加‘清除'圖標(biāo)
 * 該實現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會自動回調(diào) 。
 */
function addClear4Datebox(theId,onChangeFun)
{
 var theObj = $(theId);
 
 //根據(jù)當(dāng)前值，確定是否顯示清除圖標(biāo)
 var showIcon = function(){  
  var icon = theObj.datebox('getIcon',0);
  if (theObj.datebox('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 
 theObj.datebox({
  //添加清除圖標(biāo)
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.datebox('clear');
   }
  }],
  
  //值改變時，根據(jù)值，確定是否顯示清除圖標(biāo)
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
  
 }); 
 
 //初始化確認圖標(biāo)顯示
 showIcon();
}


/*
 * 為‘日期時間選擇框'添加‘清除'圖標(biāo)
 * 該實現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會自動回調(diào) 。
 */
function addClear4Datetimebox(theId,onChangeFun)
{
 var theObj = $(theId);
 
 //根據(jù)當(dāng)前值，確定是否顯示清除圖標(biāo)
 var showIcon = function(){  
  var icon = theObj.datetimebox('getIcon',0);
  if (theObj.datetimebox('getValue')){
   icon.css('visibility','visible');
  } else {
   icon.css('visibility','hidden');
  }
 };
 
 theObj.datetimebox({
  //添加清除圖標(biāo)
  icons:[{
   iconCls:'icon-clear',
   handler: function(e){
    theObj.datetimebox('clear');
   }
  }],
  
  //值改變時，根據(jù)值，確定是否顯示清除圖標(biāo)
  onChange:function(){
   if(onChangeFun)
   {
    onChangeFun();
   }
   showIcon();
  }
  
 }); 
 
 //初始化確認圖標(biāo)顯示
 showIcon();
}

3、使用

用法格式如下：

（1）addClear4TextBox("#name",nameChangeDo); //文本框,同時傳入了回調(diào)函數(shù)
（2）addClear4Combobox("#state\\.id"); //下拉列表框
（3）addClear4Combogrid("#type\\.id"); //數(shù)據(jù)表格下拉框
（4）addClear4Numberbox("#intNum2"); //數(shù)值輸入框
（5）addClear4Datebox("#theDate2"); //日期選擇框
（6）addClear4Datetimebox("#theTime2"); //日期選擇框

注：函數(shù)的實現(xiàn)使用了 onChange 事件，如果需要使用該事件執(zhí)行某些操作，可傳入自定義函數(shù)，會自動回調(diào) ，參見（1）。

<script>

//名稱改變時執(zhí)行的一些操作。（演示清除操作回調(diào)）
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）有值時的情況（其中 類型 是數(shù)據(jù)列表下拉框）

為Jquery EasyUI 組件加上清除功能的方法(詳解)

（2）無值時的情況

為Jquery EasyUI 組件加上清除功能的方法(詳解)

以上這篇為Jquery EasyUI 組件加上清除功能的方法(詳解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標(biāo)題：為JqueryEasyUI組件加上清除功能的方法(詳解)
鏈接地址：http://chinadenli.net/article46/jdpohg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、面包屑導(dǎo)航、小程序開發(fā)、品牌網(wǎng)站制作、企業(yè)建站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)