jQueryEasyUI組件加上“清除”功能的示例分析
這篇文章主要介紹jQuery EasyUI組件加上“清除”功能的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)公司專(zhuān)業(yè)提供成都主機(jī)托管四川主機(jī)托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價(jià)格，機(jī)房位于中國(guó)電信/網(wǎng)通/移動(dòng)機(jī)房，德陽(yáng)機(jī)房托管服務(wù)有保障！
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>
//名稱(chēng)改變時(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í)的情況（其中 類(lèi)型 是數(shù)據(jù)列表下拉框）
（2）無(wú)值時(shí)的情況
以上是“jQuery EasyUI組件加上“清除”功能的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
名稱(chēng)欄目：jQueryEasyUI組件加上“清除”功能的示例分析
分享地址：http://aaarwkj.com/article22/gpejjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 企業(yè)建站目的以及建站帶來(lái)的好處 2015-03-07
- 成都網(wǎng)站建設(shè)：企業(yè)建站選擇哪種網(wǎng)站最合適？ 2017-01-05
- 成都網(wǎng)站建設(shè)-企業(yè)網(wǎng)站有什么作用？企業(yè)建站優(yōu)點(diǎn)有哪些？ 2016-09-18
- 網(wǎng)站搭建初期 企業(yè)建站策劃該寫(xiě)什么內(nèi)容？ 2021-02-26
- 中小企業(yè)建站怎么選擇合適的空間呢？ 2016-10-29
- 香港云主機(jī)是否適合企業(yè)建站？ 2022-10-05
- 企業(yè)建站公司都要做哪些工作呢？ 2020-06-23
- 論企業(yè)建站定位的重要性 2022-08-15
- 企業(yè)建站移動(dòng)網(wǎng)站有哪些好處 2022-08-21
- 網(wǎng)站建設(shè)公司幫企業(yè)建站的目的 2017-08-15
- 企業(yè)建站的規(guī)則及其相關(guān)要點(diǎn)，想明白就一定要先了解！ 2022-08-30
- 漳州建設(shè)網(wǎng)站：企業(yè)建站過(guò)程中如何做才比較有利于排名？ 2021-09-05