jQuery EasyUI封裝簡化操作
更新時間:2016年09月18日 14:57:21 作者:小鋒神
這篇文章主要為大家詳細介紹了Jquery EasyUI封裝簡化操作,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家封裝了Jquery EasyUI簡化操作,供大家參考,具體內(nèi)容如下
//confirm
function Confirm(msg, control) {
$.messager.confirm('確認', 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("正在運行,請稍候。。。").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'
});
}
}
//刪除確認confirm
function deleteConfirm() {
return showConfirm('溫馨提示', '確定要刪除嗎?');
}
//彈出確認框confirm
function showConfirm(title, msg, callback) {
$.messager.confirm(title, msg, function (r) {
if (r) {
if (jQuery.isFunction(callback))
callback.call();
}
});
}
//進度條
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ù),請稍等片刻......'
});
}
//關閉彈出框體 window
function closeMyWindow() {
$('#myWindow').window('close');
}
/**
*清空指定表單中的內(nèi)容,參數(shù)為目標form的id
*注:在使用Jquery EasyUI的彈出窗口錄入新增內(nèi)容時,每次打開必須清空上次輸入的歷史
*數(shù)據(jù),此時通常采用的方法是對每個輸入組件進行置空操作:$("#name").val(""),這樣做,
*當輸入組件比較多時會很繁瑣,產(chǎn)生的js代碼很長,這時可以將所有的輸入組件放入個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ù),因為采用后者,如果日后
*在修改項目時,要在系統(tǒng)中的所有刷新處進行其他一些操作,那么你將要修改系統(tǒng)中所有涉及刷新
*的代碼,這個工作量非常大,而且容易遺漏;但是如果使用本方法來刷新列表,那么對于這種修
*該需求將很容易做到,而去不會出錯,不遺漏。
*
*@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ù)記錄的目標table列表id
*/
function clearSelect(dataTableId) {
$('#' + dataTableId).datagrid('clearSelections');
//取消選擇DataGrid中的全選
$("input[type='checkbox']").eq(0).attr("checked", false);
}
/**
*關閉Jquery EasyUi的彈出窗口(適用于Jquery Easy Ui)
*
*@paramdialogId將要關閉窗口的id
*/
function closeDialog(dialogId) {
$('#' + dialogId).dialog('close');
}
/**
*自適應表格的寬度處理(適用于Jquery Easy Ui中的dataGrid的列寬),
*注:可以實現(xiàn)列表的各列寬度跟著瀏覽寬度的變化而變化,即采用該方法來設置DataGrid
*的列寬可以在不同分辨率的瀏覽器下自動伸縮從而滿足不同分辨率瀏覽器的要求
*使用方法:(如:{field:'ymName',title:'編號',width:fillsize(0.08),align:'center'},)
*
*@parampercent當前列的列寬所占整個窗口寬度的百分比(以小數(shù)形式出現(xiàn),如0.3代表30%)
*
*@return通過當前窗口和對應的百分比計算出來的具體寬度
*/
function fillsize(percent) {
var bodyWidth = document.body.clientWidth;
return (bodyWidth - 90) * percent;
}
/**
* 獲取所選記錄行(單選)
*
* @paramdataTableId目標記錄所在的DataGrid列表的table的id
* @paramerrorMessage 如果沒有選擇一行(即沒有選擇或選擇了多行)的提示信息
*
* @return 所選記錄行對象,如果返回值為null,或者"null"(有時瀏覽器將null轉換成了字符串"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,多個id用逗號分隔
* 注:該方法使用的前提是:DataGrid的idField屬性對應到列表Json數(shù)據(jù)中的字段名必須為id
* @paramdataTableId目標記錄所在的DataGrid列表table的id
*
* @return 所選記錄的id字符串(多個id用逗號隔開)
*/
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)
*注:該方法會自動將所選記錄的id(DataGrid的idField屬性對應到列表Json數(shù)據(jù)中的字段名必須為id)
*動態(tài)組裝成字符串,多個id使用逗號隔開(如:1,2,3,8,10),然后存放入變量ids中傳入后臺,后臺
*可以使用該參數(shù)名從request對象中獲取所有id值字符串,此時在組裝sql或者hql語句時可以采用in
*關鍵字來處理,簡介方便。
*另外,后臺代碼必須在操作完之后以ajax的形式返回Json格式的提示信息,提示的json格式信息中必須有一個
*message字段,存放本次刪除操作成功與失敗等一些提示操作用戶的信息。
*
*@paramdataTableId將要刪除記錄所在的列表table的id
*@paramrequestURL與后臺服務器進行交互,進行具體刪除操作的請求路徑
*@paramconfirmMessage 刪除確認信息
*/
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('提示消息', '請選擇你要刪除的記錄!', 'info');
} else {
$.messager.confirm('確認', 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)用的校驗方法***************************/
/*
notNull('age','年齡不能為空');
reapet('password','repassword','兩次輸入不相同');
number('age','只能為數(shù)字');
cellPhone('phone','手機號格式不正確');
phone('phone','電話號碼格式不正確');
email('email','郵箱格式不正確');
unique('username','unique.html','name');
form('form','user_regist.html');
*/
//不為空函數(shù)
notNull = function(id, msg){
$('#'+id).validatebox({
required: true,
missingMessage: msg
});
}
//重復函數(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+'"]'
});
};
//手機號碼
cellPhone = function(id, msg){
$('#'+id).validatebox({
validType: 'cellPhone["'+msg+'"]'
});
};
//電話號碼
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+'"]'
});
};
/**
* 提交后臺進行唯一性校驗
* @param id:校驗元素的id,url: 提交的地址,paramName: 傳入值的參數(shù)名稱
*/
unique = function(id, url, paramName){
$('#'+id).validatebox({
validType: 'unique["'+url+'","'+id+'","'+paramName+'"]'
});
};
//提交,數(shù)據(jù)無效時阻止提交
form = function(id, url){
$("#"+id).form({
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(data){
alert(data);
}
});
};
/*************************不為空校驗 required="true"********************************/
//在HMTL標簽中加入required="true"可進行不能為空校驗
$("*").each(function(){
if($(this).attr('required')){
$(this).validatebox({
required: true,
missingMessage: '不能為空'
});
}
});
//當使用struts標簽時,加入屬性required="true"能過下面代碼實現(xiàn)不能為空校驗
//注意:struts標簽需用label
$('span').each(function(){
//遍歷所有span標簽,檢驗是否設有class="required"
if($(this).attr('class')=='required'){
$("#"+$(this).parent().attr('for')).validatebox({
required: true,
missingMessage: '不能為空'
});
}
});
/*************************自定義方法********************************/
/**
*自定義的校驗方法(校驗兩次密碼是否相同)
* @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}'
}
});
//利用正則進行數(shù)字校驗
$.extend($.fn.validatebox.defaults.rules, {
number: {
validator: function(value, param){
return /^-?(?:/d+|/d{1,3}(?:,/d{3})+)(?:/./d+)?$/.test(value);
},
message: '{0}'
}
});
//手機號
$.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}'
}
});
/**
* 電話號碼
* 匹配格式:11位手機號碼
* 3-4位區(qū)號,7-8位直播號碼,1-4位分機號
* 如: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校驗
$.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}'
}
});
//唯一性校驗
$.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) //后臺返回true或者false
return true;
});
return false;
},
message: '用戶名已存在'
}
});
});
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery插件EasyUI中form表單提交實例分享
- jQuery EasyUI之DataGrid使用實例詳解
- Jquery插件easyUi實現(xiàn)表單驗證示例
- 輕松學習jQuery插件EasyUI EasyUI表單驗證
- 輕松學習jQuery插件EasyUI EasyUI創(chuàng)建樹形菜單
- 輕松學習jQuery插件EasyUI EasyUI實現(xiàn)樹形網(wǎng)絡基本操作(2)
- 輕松學習jQuery插件EasyUI EasyUI創(chuàng)建樹形網(wǎng)絡(1)
- jQuery插件EasyUI校驗規(guī)則 validatebox驗證框
- 實例解析jQuery插件EasyUI最常用的表單驗證規(guī)則
- jQuery EasyUI Dialog拖不下來如何解決
相關文章
javascript異步處理與Jquery deferred對象用法總結
這篇文章主要介紹了javascript異步處理與Jquery deferred對象用法,結合實例形式總結分析了jQuery異步請求處理相關操作技巧,需要的朋友可以參考下2019-06-06

