本文实例为大家封装了Jquery EasyUI简化操作,供大家参考,具体内容如下
function Load() {
$("<div class=\"datagrid-mask\">
$("<div class=\"datagrid-mask-msg\">
本文实例为大家封装了Jquery EasyUI简化操作,供大家参考,具体内容如下
//display Load
function dispalyLoad() {
$(".datagrid-mask").remove();
$(".datagrid-mask-msg").remove();
}
//弹出提醒框alert
function showMsg(title,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,callback) {
$.messager.confirm(title,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%;">',// 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: '正在加载数据,请稍等片刻......'
});
}
//关闭弹出框体 window
function closeMyWindow() {
$('#myWindow').window('close');
}
/*
清空指定表单中的内容,参数为目标form的id
注:在使用Jquery EasyUI的弹出窗口录入新增内容时,每次打开必须清空上次输入的历史
数据,此时通常采用的方法是对每个输入组件进行置空操作:$("#name").val(""),这样做,
当输入组件比较多时会很繁琐,产生的js代码很长,这时可以将所有的输入组件放入个form表单
中,然后调用以下方法即可。
/*
刷新DataGrid列表(适用于Jquery Easy Ui中的dataGrid)
注:建议采用此方法来刷新DataGrid列表数据(也即重新加载数据),不建议直接使用语句
$('#dataTableId').datagrid('reload');来刷新列表数据,因为采用后者,如果日后
在修改项目时,要在系统中的所有刷新处进行其他一些操作,那么你将要修改系统中所有涉及刷新
的代码,这个工作量非常大,而且容易遗漏;但是如果使用本方法来刷新列表,那么对于这种修
*该需求将很容易做到,而去不会出错,不遗漏。
@paramdataTableId将要取消所选数据记录的目标table列表id
/
function clearSelect(dataTableId) {
$('#' + dataTableId).datagrid('clearSelections');
//取消选择DataGrid中的全选
$("input[type='checkBox']").eq(0).attr("checked",false);
}
/*
关闭Jquery EasyUi的弹出窗口(适用于Jquery Easy Ui)
/*
自适应表格的宽度处理(适用于Jquery Easy Ui中的dataGrid的列宽),注:可以实现列表的各列宽度跟着浏览宽度的变化而变化,即采用该方法来设置DataGrid
的列宽可以在不同分辨率的浏览器下自动伸缩从而满足不同分辨率浏览器的要求
*使用方法:(如:{field:'ymName',title:'编号',width:fillsize(0.08),align:'center'},)
@return通过当前窗口和对应的百分比计算出来的具体宽度
/
function fillsize(percent) {
var bodyWidth = document.body.clientWidth;
return (bodyWidth - 90) * percent;
}
/**
/**
/*
删除所选记录(适用于Jquery Easy Ui中的dataGrid)(删除的依据字段是id)
注:该方法会自动将所选记录的id(DataGrid的idField属性对应到列表Json数据中的字段名必须为id)
动态组装成字符串,多个id使用逗号隔开(如:1,2,3,8,10),然后存放入变量ids中传入后台,后台
可以使用该参数名从request对象中获取所有id值字符串,此时在组装sql或者hql语句时可以采用in
关键字来处理,简介方便。
另外,后台代码必须在操作完之后以ajax的形式返回Json格式的提示信息,提示的json格式信息中必须有一个
message字段,存放本次删除操作成功与失败等一些提示操作用户的信息。
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(){
/*可直接调用的校验方法***/
/
notNull('age','年龄不能为空');
reapet('password','repassword','两次输入不相同');
number('age','只能为数字');
cellPhone('phone','手机号格式不正确');
phone('phone','电话号码格式不正确');
email('email','邮箱格式不正确');
unique('username','unique.html','name');
form('form','user_regist.html');
/
//不为空函数
notNull = function(id,msg){
$('#'+id).validateBox({
required: true,missingMessage: msg
});
}
//重复函数
reapet = function(id,re_id,msg){
id = '#'+id;
$('#'+re_id).validateBox({
validType: "reapet['"+id+"','"+msg+"']"
});
};
//数字
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+'"]'
});
};
/**
/*****自定义方法****/
/*
自定义的校验方法(校验两次密码是否相同)
//利用正则进行数字校验
$.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}'
}
});
/**