jQuery EasyUI封裝簡化操作
更新時(shí)間:2016年09月18日 14:57:21 作者:小鋒神
這篇文章主要為大家詳細(xì)介紹了Jquery EasyUI封裝簡化操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家封裝了Jquery EasyUI簡化操作,供大家參考,具體內(nèi)容如下
//confirm function Confirm(msg, control) { $.messager.confirm('確認(rèn)', msg, function (r) { if (r) { eval(control.toString().slice(11)); } }); return false; } //load function Load() { $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body"); $("<div class=\"datagrid-mask-msg\"></div>").html("正在運(yùn)行,請(qǐng)稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 }); } //display Load function dispalyLoad() { $(".datagrid-mask").remove(); $(".datagrid-mask-msg").remove(); } //彈出提醒框alert function showMsg(title, msg, isAlert) { if (isAlert !== undefined && isAlert) { $.messager.alert(title, msg); } else { $.messager.show({ title: title, msg: msg, showType: 'show' }); } } //刪除確認(rèn)confirm function deleteConfirm() { return showConfirm('溫馨提示', '確定要?jiǎng)h除嗎?'); } //彈出確認(rèn)框confirm function showConfirm(title, msg, callback) { $.messager.confirm(title, msg, function (r) { if (r) { if (jQuery.isFunction(callback)) callback.call(); } }); } //進(jìn)度條 function showProcess(isShow, title, msg) { if (!isShow) { $.messager.progress('close'); return; } var win = $.messager.progress({ title: title, msg: msg }); } //彈出框體window function showMyWindow(title, href, width, height, modal, minimizable, maximizable) { $('#myWindow').window({ title: title, width: width === undefined ? 600 : width, height: height === undefined ? 400 : height, content: '<iframe scrolling="yes" frameborder="0" src="' + href + '" style="width:100%;height:98%;"></iframe>', // href: href === undefined ? null : href, modal: modal === undefined ? true : modal, minimizable: minimizable === undefined ? false : minimizable, maximizable: maximizable === undefined ? false : maximizable, shadow: false, cache: false, closed: false, collapsible: false, resizable: false, loadingMessage: '正在加載數(shù)據(jù),請(qǐng)稍等片刻......' }); } //關(guān)閉彈出框體 window function closeMyWindow() { $('#myWindow').window('close'); } /** *清空指定表單中的內(nèi)容,參數(shù)為目標(biāo)form的id *注:在使用Jquery EasyUI的彈出窗口錄入新增內(nèi)容時(shí),每次打開必須清空上次輸入的歷史 *數(shù)據(jù),此時(shí)通常采用的方法是對(duì)每個(gè)輸入組件進(jìn)行置空操作:$("#name").val(""),這樣做, *當(dāng)輸入組件比較多時(shí)會(huì)很繁瑣,產(chǎn)生的js代碼很長,這時(shí)可以將所有的輸入組件放入個(gè)form表單 *中,然后調(diào)用以下方法即可。 * *@param formId將要清空內(nèi)容的form表單的id */ function resetContent(formId) { var clearForm = document.getElementById(formId); if (null != clearForm && typeof (clearForm) != "undefined") { clearForm.reset(); } } /** *刷新DataGrid列表(適用于Jquery Easy Ui中的dataGrid) *注:建議采用此方法來刷新DataGrid列表數(shù)據(jù)(也即重新加載數(shù)據(jù)),不建議直接使用語句 *$('#dataTableId').datagrid('reload');來刷新列表數(shù)據(jù),因?yàn)椴捎煤笳?,如果日? *在修改項(xiàng)目時(shí),要在系統(tǒng)中的所有刷新處進(jìn)行其他一些操作,那么你將要修改系統(tǒng)中所有涉及刷新 *的代碼,這個(gè)工作量非常大,而且容易遺漏;但是如果使用本方法來刷新列表,那么對(duì)于這種修 *該需求將很容易做到,而去不會(huì)出錯(cuò),不遺漏。 * *@paramdataTableId將要刷新數(shù)據(jù)的DataGrid依賴的table列表id */ function flashTable(dataTableId) { $('#' + dataTableId).datagrid('reload'); } /** *取消DataGrid中的行選擇(適用于Jquery Easy Ui中的dataGrid) *注意:解決了無法取消"全選checkbox"的選擇,不過,前提是必須將列表展示 *數(shù)據(jù)的DataGrid所依賴的Table放入html文檔的最全面,至少該table前沒有 *其他checkbox組件。 * *@paramdataTableId將要取消所選數(shù)據(jù)記錄的目標(biāo)table列表id */ function clearSelect(dataTableId) { $('#' + dataTableId).datagrid('clearSelections'); //取消選擇DataGrid中的全選 $("input[type='checkbox']").eq(0).attr("checked", false); } /** *關(guān)閉Jquery EasyUi的彈出窗口(適用于Jquery Easy Ui) * *@paramdialogId將要關(guān)閉窗口的id */ function closeDialog(dialogId) { $('#' + dialogId).dialog('close'); } /** *自適應(yīng)表格的寬度處理(適用于Jquery Easy Ui中的dataGrid的列寬), *注:可以實(shí)現(xiàn)列表的各列寬度跟著瀏覽寬度的變化而變化,即采用該方法來設(shè)置DataGrid *的列寬可以在不同分辨率的瀏覽器下自動(dòng)伸縮從而滿足不同分辨率瀏覽器的要求 *使用方法:(如:{field:'ymName',title:'編號(hào)',width:fillsize(0.08),align:'center'},) * *@parampercent當(dāng)前列的列寬所占整個(gè)窗口寬度的百分比(以小數(shù)形式出現(xiàn),如0.3代表30%) * *@return通過當(dāng)前窗口和對(duì)應(yīng)的百分比計(jì)算出來的具體寬度 */ function fillsize(percent) { var bodyWidth = document.body.clientWidth; return (bodyWidth - 90) * percent; } /** * 獲取所選記錄行(單選) * * @paramdataTableId目標(biāo)記錄所在的DataGrid列表的table的id * @paramerrorMessage 如果沒有選擇一行(即沒有選擇或選擇了多行)的提示信息 * * @return 所選記錄行對(duì)象,如果返回值為null,或者"null"(有時(shí)瀏覽器將null轉(zhuǎn)換成了字符串"null")說明沒有 *選擇一行記錄。 */ function getSingleSelectRow(dataTableId, errorMessage) { var rows = $('#' + dataTableId).datagrid('getSelections'); var num = rows.length; if (num == 1) { return rows[0]; } else { $.messager.alert('提示消息', errorMessage, 'info'); return null; } } /** * 在DataGrid中獲取所選記錄的id,多個(gè)id用逗號(hào)分隔 * 注:該方法使用的前提是:DataGrid的idField屬性對(duì)應(yīng)到列表Json數(shù)據(jù)中的字段名必須為id * @paramdataTableId目標(biāo)記錄所在的DataGrid列表table的id * * @return 所選記錄的id字符串(多個(gè)id用逗號(hào)隔開) */ function getSelectIds(dataTableId, noOneSelectMessage) { var rows = $('#' + dataTableId).datagrid('getSelections'); var num = rows.length; var ids = null; if (num < 1) { if (null != noOneSelectMessage) $.messager.alert('提示消息', noOneSelectMessage, 'info'); return null; } else { for (var i = 0; i < num; i++) { if (null == ids || i == 0) { ids = rows[i].id; } else { ids = ids + "," + rows[i].id; } } return ids; } } /** *刪除所選記錄(適用于Jquery Easy Ui中的dataGrid)(刪除的依據(jù)字段是id) *注:該方法會(huì)自動(dòng)將所選記錄的id(DataGrid的idField屬性對(duì)應(yīng)到列表Json數(shù)據(jù)中的字段名必須為id) *動(dòng)態(tài)組裝成字符串,多個(gè)id使用逗號(hào)隔開(如:1,2,3,8,10),然后存放入變量ids中傳入后臺(tái),后臺(tái) *可以使用該參數(shù)名從request對(duì)象中獲取所有id值字符串,此時(shí)在組裝sql或者h(yuǎn)ql語句時(shí)可以采用in *關(guān)鍵字來處理,簡介方便。 *另外,后臺(tái)代碼必須在操作完之后以ajax的形式返回Json格式的提示信息,提示的json格式信息中必須有一個(gè) *message字段,存放本次刪除操作成功與失敗等一些提示操作用戶的信息。 * *@paramdataTableId將要?jiǎng)h除記錄所在的列表table的id *@paramrequestURL與后臺(tái)服務(wù)器進(jìn)行交互,進(jìn)行具體刪除操作的請(qǐng)求路徑 *@paramconfirmMessage 刪除確認(rèn)信息 */ function deleteNoteById(dataTableId, requestURL, confirmMessage) { if (null == confirmMessage || typeof (confirmMessage) == "undefined" || "" == confirmMessage) { confirmMessage = "確定刪除所選記錄?"; } var rows = $('#' + dataTableId).datagrid('getSelections'); var num = rows.length; var ids = null; if (num < 1) { $.messager.alert('提示消息', '請(qǐng)選擇你要?jiǎng)h除的記錄!', 'info'); } else { $.messager.confirm('確認(rèn)', confirmMessage, function (r) { if (r) { for (var i = 0; i < num; i++) { if (null == ids || i == 0) { ids = rows[i].id; } else { ids = ids + "," + rows[i].id; } } $.getJSON(requestURL, { "ids": ids }, function (data) { if (null != data && null != data.message && "" != data.message) { $.messager.alert('提示消息', data.message, 'info'); flashTable(dataTableId); } else { $.messager.alert('提示消息', '刪除失??!', 'warning'); } clearSelect(dataTableId); }); } }); } } $(function(){ /*************************可直接調(diào)用的校驗(yàn)方法***************************/ /* notNull('age','年齡不能為空'); reapet('password','repassword','兩次輸入不相同'); number('age','只能為數(shù)字'); cellPhone('phone','手機(jī)號(hào)格式不正確'); phone('phone','電話號(hào)碼格式不正確'); email('email','郵箱格式不正確'); unique('username','unique.html','name'); form('form','user_regist.html'); */ //不為空函數(shù) notNull = function(id, msg){ $('#'+id).validatebox({ required: true, missingMessage: msg }); } //重復(fù)函數(shù) reapet = function(id, re_id, msg){ id = '#'+id; $('#'+re_id).validatebox({ validType: "reapet['"+id+"','"+msg+"']" }); }; //數(shù)字 number = function(id, msg){ $('#'+id).validatebox({ validType: 'number["'+msg+'"]' }); }; //手機(jī)號(hào)碼 cellPhone = function(id, msg){ $('#'+id).validatebox({ validType: 'cellPhone["'+msg+'"]' }); }; //電話號(hào)碼 phone = function(id, msg){ $('#'+id).validatebox({ validType: 'phone["'+msg+'"]' }); }; //郵箱 email = function(id,msg){ $('#'+id).validatebox({ validType: 'email', invalidMessage: msg }); }; //url url = function(id, msg){ $('#'+id).validatebox({ validType: 'url', invalidMessage: msg }); }; //ip ip = function(id, msg){ $('#'+id).validatebox({ validType: 'ip["'+msg+'"]' }); }; /** * 提交后臺(tái)進(jìn)行唯一性校驗(yàn) * @param id:校驗(yàn)元素的id,url: 提交的地址,paramName: 傳入值的參數(shù)名稱 */ unique = function(id, url, paramName){ $('#'+id).validatebox({ validType: 'unique["'+url+'","'+id+'","'+paramName+'"]' }); }; //提交,數(shù)據(jù)無效時(shí)阻止提交 form = function(id, url){ $("#"+id).form({ url: url, onSubmit: function(){ return $(this).form('validate'); }, success: function(data){ alert(data); } }); }; /*************************不為空校驗(yàn) required="true"********************************/ //在HMTL標(biāo)簽中加入required="true"可進(jìn)行不能為空校驗(yàn) $("*").each(function(){ if($(this).attr('required')){ $(this).validatebox({ required: true, missingMessage: '不能為空' }); } }); //當(dāng)使用struts標(biāo)簽時(shí),加入屬性required="true"能過下面代碼實(shí)現(xiàn)不能為空校驗(yàn) //注意:struts標(biāo)簽需用label $('span').each(function(){ //遍歷所有span標(biāo)簽,檢驗(yàn)是否設(shè)有class="required" if($(this).attr('class')=='required'){ $("#"+$(this).parent().attr('for')).validatebox({ required: true, missingMessage: '不能為空' }); } }); /*************************自定義方法********************************/ /** *自定義的校驗(yàn)方法(校驗(yàn)兩次密碼是否相同) * @param param為傳入第一次輸入的密碼框的id * @call repeat['#id'] */ $.extend($.fn.validatebox.defaults.rules,{ reapet: { validator: function(value, param){ var pwd = $(param[0]).attr('value'); if(pwd != value){ return false; } return true; }, message: '{1}' } }); //利用正則進(jìn)行數(shù)字校驗(yàn) $.extend($.fn.validatebox.defaults.rules, { number: { validator: function(value, param){ return /^-?(?:/d+|/d{1,3}(?:,/d{3})+)(?:/./d+)?$/.test(value); }, message: '{0}' } }); //手機(jī)號(hào) $.extend($.fn.validatebox.defaults.rules,{ cellPhone: { validator: function(value, param){ return /^0{0,1}(13[4-9]|15[7-9]|15[0-2]|18[7-8])[0-9]{8}$/.test(value); }, message: '{0}' } }); /** * 電話號(hào)碼 * 匹配格式:11位手機(jī)號(hào)碼 * 3-4位區(qū)號(hào),7-8位直播號(hào)碼,1-4位分機(jī)號(hào) * 如:12345678901、1234-12345678-1234 */ $.extend($.fn.validatebox.defaults.rules,{ phone: { validator: function(value, param){ return /(/d{11})|^((/d{7,8})|(/d{4}|/d{3})-(/d{7,8})|(/d{4}|/d{3})-(/d{7,8})-(/d{4}|/d{3}|/d{2}|/d{1})|(/d{7,8})-(/d{4}|/d{3}|/d{2}|/d{1}))$/.test(value); }, message: '{0}' } }); //ip校驗(yàn) $.extend($.fn.validatebox.defaults.rules,{ ip: { validator: function(value, param){ return /^((2[0-4]/d|25[0-5]|[01]?/d/d?)/.){3}(2[0-4]/d|25[0-5]|[01]?/d/d?)$/.test(value); }, message: '{0}' } }); //唯一性校驗(yàn) $.extend($.fn.validatebox.defaults.rules,{ unique: { validator: function(value, param){ value = $('#'+param[1]).attr('value'); $('#'+param[1]).load(param[0]+"?"+param[2]+"="+value, function(responseText, textStatus, XMLHttpRequest){ if(responseText) //后臺(tái)返回true或者false return true; }); return false; }, message: '用戶名已存在' } }); });
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery插件EasyUI中form表單提交實(shí)例分享
- jQuery EasyUI之DataGrid使用實(shí)例詳解
- Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI表單驗(yàn)證
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹形菜單
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)樹形網(wǎng)絡(luò)基本操作(2)
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹形網(wǎng)絡(luò)(1)
- jQuery插件EasyUI校驗(yàn)規(guī)則 validatebox驗(yàn)證框
- 實(shí)例解析jQuery插件EasyUI最常用的表單驗(yàn)證規(guī)則
- jQuery EasyUI Dialog拖不下來如何解決
相關(guān)文章
jQuery初識(shí)之設(shè)計(jì)思想方法函數(shù)示例
這篇文章主要為大家介紹了jQuery初識(shí)之設(shè)計(jì)思想及方法函數(shù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06jquery實(shí)現(xiàn)簡單Tab切換菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單Tab切換菜單效果的相關(guān)資料,需要的朋友可以參考下2016-06-06jquery 學(xué)習(xí)之二 屬性相關(guān)
jquery 學(xué)習(xí)之二 屬性相關(guān)資料,學(xué)習(xí)jquery的朋友可以參考下。2010-11-11javascript異步處理與Jquery deferred對(duì)象用法總結(jié)
這篇文章主要介紹了javascript異步處理與Jquery deferred對(duì)象用法,結(jié)合實(shí)例形式總結(jié)分析了jQuery異步請(qǐng)求處理相關(guān)操作技巧,需要的朋友可以參考下2019-06-06