jQuery EasyUI 組件加上“清除”功能實(shí)例詳解
更新時(shí)間：2017年04月11日 08:49:41 作者：如蓮家園
在使用 EasyUI 各表單組件時(shí)，尤其是使用 ComboBox（下拉列表框）、DateBox（日期輸入框）、DateTimeBox（日期時(shí)間輸入框）這三個(gè)組件時(shí)，經(jīng)常會(huì)遇到下拉框或日期只允許選擇、不允許手動(dòng)輸入功能，怎么解決呢，下面小編給大家分享解決方案，一起看看吧
1、背景
在使用 EasyUI 各表單組件時(shí)，尤其是使用 ComboBox（下拉列表框）、DateBox（日期輸入框）、DateTimeBox（日期時(shí)間輸入框）這三個(gè)組件時(shí)，經(jīng)常有這樣的需求，下拉框或日期只允許選擇、不允許手動(dòng)輸入，這時(shí)只要在組件選項(xiàng)中加入 editable:false 就可以實(shí)現(xiàn)，但有一個(gè)問(wèn)題，就是：一旦選擇了，沒(méi)辦法清空。經(jīng)過(guò)研究，可以用一個(gè)變通的解決方案：給組件加上一個(gè)“清除”按鈕，當(dāng)有值是，顯示按鈕，點(diǎn)擊按鈕可清空值，當(dāng)無(wú)值是，隱藏按鈕。
2、函數(shù)定義
定義JS方法，為 EasyUI 中一些常用組件添加'清除'按鈕及功能。共計(jì)6個(gè)：
/*
* 為‘文本框'列表添加‘清除'圖標(biāo)
* 該實(shí)現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會(huì)自動(dòng)回調(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');
}
}],
//值改變時(shí)，根據(jù)值，確定是否顯示清除圖標(biāo)
onChange:function(){
if(onChangeFun)
{
onChangeFun();
}
showIcon();
}
});
//根據(jù)目前值，確定是否顯示清除圖標(biāo)
showIcon();
}
/*
* 為‘下拉列表框'添加‘清除'圖標(biāo)
* 該實(shí)現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會(huì)自動(dòng)回調(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');
}
}],
//值改變時(shí)，根據(jù)值，確定是否顯示清除圖標(biāo)
onChange:function(){
if(onChangeFun)
{
onChangeFun();
}
showIcon();
}
});
//初始化確認(rèn)圖標(biāo)顯示
showIcon();
}
/*
* 為‘?dāng)?shù)據(jù)表格下拉框'添加‘清除'圖標(biāo)
* 該實(shí)現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會(huì)自動(dòng)回調(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');
}
}],
//值改變時(shí)，根據(jù)值，確定是否顯示清除圖標(biāo)
onChange:function(){
if(onChangeFun)
{
onChangeFun();
}
showIcon();
}
});
//初始化確認(rèn)圖標(biāo)顯示
showIcon();
}
/*
* 為‘?dāng)?shù)值輸入框'添加‘清除'圖標(biāo)
* 該實(shí)現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會(huì)自動(dòng)回調(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');
}
}],
//值改變時(shí)，根據(jù)值，確定是否顯示清除圖標(biāo)
onChange:function(){
if(onChangeFun)
{
onChangeFun();
}
showIcon();
}
});
//初始化確認(rèn)圖標(biāo)顯示
showIcon();
}
/*
* 為‘日期選擇框'添加‘清除'圖標(biāo)
* 該實(shí)現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會(huì)自動(dòng)回調(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');
}
}],
//值改變時(shí)，根據(jù)值，確定是否顯示清除圖標(biāo)
onChange:function(){
if(onChangeFun)
{
onChangeFun();
}
showIcon();
}
});
//初始化確認(rèn)圖標(biāo)顯示
showIcon();
}
/*
* 為‘日期時(shí)間選擇框'添加‘清除'圖標(biāo)
* 該實(shí)現(xiàn)使用了 onChange 事件，如果用戶需要該事件，可傳入自定義函數(shù)，會(huì)自動(dòng)回調(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');
}
}],
//值改變時(shí)，根據(jù)值，確定是否顯示清除圖標(biāo)
onChange:function(){
if(onChangeFun)
{
onChangeFun();
}
showIcon();
}
});
//初始化確認(rèn)圖標(biāo)顯示
showIcon();
}
3、使用
用法格式如下：
（1）addClear4TextBox("#name",nameChangeDo); //文本框,同時(shí)傳入了回調(diào)函數(shù)
（2）addClear4Combobox("#state\\.id"); //下拉列表框
（3）addClear4Combogrid("#type\\.id"); //數(shù)據(jù)表格下拉框
（4）addClear4Numberbox("#intNum2"); //數(shù)值輸入框
（5）addClear4Datebox("#theDate2"); //日期選擇框
（6）addClear4Datetimebox("#theTime2"); //日期選擇框
注：函數(shù)的實(shí)現(xiàn)使用了 onChange 事件，如果需要使用該事件執(zhí)行某些操作，可傳入自定義函數(shù)，會(huì)自動(dòng)回調(diào) ，參見(jiàn)（1）。
<script>
//名稱改變時(shí)執(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í)的情況（其中 類型 是數(shù)據(jù)列表下拉框）
（2）無(wú)值時(shí)的情況
以上所述是小編給大家介紹的jQuery EasyUI 組件加上“清除”功能實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
解決checkbox的attr(checked)一直為undefined問(wèn)題
需要做個(gè)一個(gè)全選的checkbox功能，遇到checkbox的attr("checked")一直為undefined，下面與大家分享下最終的解決方案2014-06-06
jQuery控制網(wǎng)頁(yè)打印指定區(qū)域的方法
這篇文章主要介紹了jQuery控制網(wǎng)頁(yè)打印指定區(qū)域的方法,涉及jQuery操作html元素的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
如何實(shí)現(xiàn)星星評(píng)價(jià)（jquery.raty.js插件）
本文主要分享了用jQuery插件jquery.raty.js實(shí)現(xiàn)星星評(píng)價(jià)功能：后臺(tái)傳數(shù)據(jù)，前臺(tái)顯示星星個(gè)數(shù)的具體方法。有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式
這篇文章主要介紹了jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式,本文用詳細(xì)的代碼實(shí)例講解jquery表單驗(yàn)證插件的使用,需要的朋友可以參考下2015-03-03
jquery兩種導(dǎo)入方式之本地導(dǎo)入和線上導(dǎo)入
這篇文章主要給大家介紹了關(guān)于jquery兩種導(dǎo)入方式之本地導(dǎo)入和線上導(dǎo)入的相關(guān)資料,jQuery是一款JavaScript庫(kù),封裝了JavaScript相關(guān)方法調(diào)用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
jQuery構(gòu)造函數(shù)init參數(shù)分析
這篇文章主要介紹了jQuery構(gòu)造函數(shù)init參數(shù)分析,今天主要是分析一下jQuery中init選擇器構(gòu)造函數(shù),處理選擇器函數(shù)中的參數(shù),感興趣的朋友可以了解下2015-05-05
下面小編就為大家?guī)?lái)一篇JQuery遍歷元素的父輩和祖先的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例
這篇文章主要為大家詳細(xì)介紹了Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
jquery用get實(shí)現(xiàn)ajax在ie里面刷新不進(jìn)入后臺(tái)解決方法
jquery用get實(shí)現(xiàn)ajax在ie里面刷新不進(jìn)入后臺(tái)的情況想必大家都有遇到過(guò)吧，下面與大家分享下具體的解決方法，希望對(duì)大家解決問(wèn)題有所幫助2013-08-08
Jquery 監(jiān)視按鍵，按下回車鍵觸發(fā)某方法的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery監(jiān)視按鍵，當(dāng)按下回車鍵時(shí)觸發(fā)事件的一個(gè)例子，有需要的朋友可以參考下2014-05-05