為Jquery EasyUI 組件加上清除功能的方法(詳解)
更新時(shí)間：2017年04月13日 08:49:02 投稿：jingxian
下面小編就為大家?guī)?lái)一篇為Jquery EasyUI 組件加上清除功能的方法(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
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 組件加上清除功能的方法(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jQuery彈出框代碼封裝DialogHelper的方法,需要的朋友可以參考下2015-01-01
jquery實(shí)現(xiàn)的偽分頁(yè)效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的偽分頁(yè)效果代碼,涉及jQuery頁(yè)面元素操作與數(shù)值計(jì)算的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程
這篇文章主要介紹了jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程,本文講解了從WFC編程到JQUERY調(diào)用的詳細(xì)步驟,并總結(jié)了使用中遇到的問(wèn)題和解決方法,需要的朋友可以參考下2015-03-03
jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果,效果非常美觀大方,通過(guò)鼠標(biāo)hover事件及頁(yè)面元素的遍歷與樣式操作實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-08-08
基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏
這篇文章主要介紹了基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏效果，當(dāng)頁(yè)面向下滾動(dòng)的時(shí)候，導(dǎo)航菜單動(dòng)態(tài)隱藏，頁(yè)面滾動(dòng)到頂部時(shí)，導(dǎo)航菜單動(dòng)態(tài)顯示，淘寶也采用過(guò)此效果，感興趣的小伙伴們可以參考一下2015-11-11
jQuery插件bxSlider實(shí)現(xiàn)響應(yīng)式焦點(diǎn)圖
bxSlider特性1.充分響應(yīng)各種設(shè)備，適應(yīng)各種屏幕；2.支持多種滑動(dòng)模式，水平、垂直以及淡入淡出效果；3.支持圖片、視頻以及任意html內(nèi)容；4.支持觸摸滑動(dòng)；5.支持Firefox，Chrome，Safari，iOS，Android，IE7+，下面我們就來(lái)詳細(xì)探討下吧。2015-04-04
jquery 實(shí)現(xiàn)input輸入什么div圖層顯示什么
這篇文章主要介紹jquery實(shí)現(xiàn)input輸入什么div圖層顯示什么的具體過(guò)程,需要的朋友可以參考下2014-06-06
jQuery 是我最喜歡的一個(gè)Javascript框架，下文中包含了眾多��以為jQuery愛(ài)好者們使用的插件。如果你還知道其他的好東西，歡迎與大家分享。2011-08-08
jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果,涉及jQuery鼠標(biāo)事件響應(yīng)及表格table動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
利用Jquery隊(duì)列實(shí)現(xiàn)根據(jù)輸入數(shù)量顯示的動(dòng)畫(huà)
這篇文章給大家演示了如何利用Jquery隊(duì)列實(shí)現(xiàn)輸入不同的數(shù)量就顯示不同的動(dòng)畫(huà)效果，文中給出了實(shí)例，讓大家更容易理解，有需要的可以參考借鑒。2016-09-09