//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: '正在加载数据,请稍等片刻......' }); } //关闭弹出框体 window
function closeMyWindow() { $('#myWindow').window('close'); } /**
*清空指定表单中的内容,参数为目标form的id
*注:在使用Jquery EasyUI的弹出窗口录入新增内容时,每次打开必须清空上次输入的历史
*数据,此时通常采用的方法是对每个输入组件进行置空操作:$("#name").val(""),这样做,
*当输入组件比较多时会很繁琐,产生的js代码很长,这时可以将所有的输入组件放入个form表单
*中,然后调用以下方法即可。
*
*@param formId将要清空内容的form表单的id
*/
function resetContent(formId) {
var clearForm = document.getElementById(formId);
if (null != clearForm && typeof (clearForm) != "undefined") {
clearForm.reset();
}
} /**
*刷新DataGrid列表(适用于Jquery Easy Ui中的dataGrid)
*注:建议采用此方法来刷新DataGrid列表数据(也即重新加载数据),不建议直接使用语句
*$('#dataTableId').datagrid('reload');来刷新列表数据,因为采用后者,如果日后
*在修改项目时,要在系统中的所有刷新处进行其他一些操作,那么你将要修改系统中所有涉及刷新
*的代码,这个工作量非常大,而且容易遗漏;但是如果使用本方法来刷新列表,那么对于这种修
*该需求将很容易做到,而去不会出错,不遗漏。
*
*@paramdataTableId将要刷新数据的DataGrid依赖的table列表id
*/
function flashTable(dataTableId) {
$('#' + dataTableId).datagrid('reload');
}
/**
*取消DataGrid中的行选择(适用于Jquery Easy Ui中的dataGrid)
*注意:解决了无法取消"全选checkbox"的选择,不过,前提是必须将列表展示
*数据的DataGrid所依赖的Table放入html文档的最全面,至少该table前没有
*其他checkbox组件。
*
*@paramdataTableId将要取消所选数据记录的目标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的列宽),
*注:可以实现列表的各列宽度跟着浏览宽度的变化而变化,即采用该方法来设置DataGrid
*的列宽可以在不同分辨率的浏览器下自动伸缩从而满足不同分辨率浏览器的要求
*使用方法:(如:{field:'ymName',title:'编号',width:fillsize(0.08),align:'center'},)
*
*@parampercent当前列的列宽所占整个窗口宽度的百分比(以小数形式出现,如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数据中的字段名必须为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)(删除的依据字段是id)
*注:该方法会自动将所选记录的id(DataGrid的idField属性对应到列表Json数据中的字段名必须为id)
*动态组装成字符串,多个id使用逗号隔开(如:1,2,3,8,10),然后存放入变量ids中传入后台,后台
*可以使用该参数名从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(){
/*************************可直接调用的校验方法***************************/
/*
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+'"]'
});
};
/**
* 提交后台进行唯一性校验
* @param id:校验元素的id,url: 提交的地址,paramName: 传入值的参数名称
*/
unique = function(id, url, paramName){
$('#'+id).validatebox({
validType: 'unique["'+url+'","'+id+'","'+paramName+'"]'
});
};
//提交,数据无效时阻止提交
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"能过下面代码实现不能为空校验
//注意: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}'
}
}); //利用正则进行数字校验
$.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位区号,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: '用户名已存在'
}
});
});

Jquery EasyUI封装简化操作的更多相关文章

  1. 对Jquery中的ajax再封装,简化操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JQuery EasyUI DataGrid常用操作及注意事项(未完)

    1.获取当前选中行,如果没有选中行,则返回 null var row = $('#gridID').datagrid('getSelected'); 2.获取当前所有选中行数据,返回的是选择的数组数据 ...

  3. springmvc + jquery easyui实现分页显示

    如有不明确的地方,戏迎增加QQ群交流:66728073      推荐一本Java学习的书:深入理解Java7 一,下载并导入jquery easyui的导 <link rel="st ...

  4. JQuery EasyUI DataGrid 获取属性值

    在Jquery EasyUI中返回操作的时候,根据当前页返回到数据选取页: var grid = $('#datagrid'); var options = grid.datagrid('getPag ...

  5. Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...

  6. [转]Jquery easyui开启行编辑模式增删改操作

    本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...

  7. 基于JQuery EasyUI的WebMVC控件封装(含源码)

    JQuery EasyUI类库,大家不会陌生,出来已经有很多年了.个人感觉还是很好用的,作者更新频率也很快,bug也及时修复. 最近在整理以前的代码,找到了这个组件,它是将EasyUI组件封装成MVC ...

  8. 给Jquery easyui 的datagrid 每行增加操作链接(转)

    http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyU ...

  9. jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作

    jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作 html <table data-toggle="topjui-datagrid" data-opti ...

随机推荐

  1. hdu 3254 (状压DP) Corn Fields

    poj 3254 n乘m的矩阵,1表示这块区域可以放牛,0,表示不能,而且不能在相邻的(包括上下相邻)两个区域放牛,问有多少种放牛的方法,全部不放也是一种方法. 对于每块可以放牛的区域,有放或者不放两 ...

  2. jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...

  3. 6、UITableView表的分割线左对齐

    //分割线左对齐 -(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtI ...

  4. js-BOM之offset家族、移动函数的封装升级(轮播图)

    Obj.style.width/obj.style.height与obj.offsetWidth/obj.offsetHeight的区别: <style> #div1{ height: 2 ...

  5. Keepalived安装配置

    一.  介绍 keepalived:是一个类似于 layer3, 4 & 7 交换机制的软件,也就是我们平时说的第 3 层.第 4 层和第 7层交换. Keepalived 的作用是检测 we ...

  6. (转) 在C#用HttpWebRequest中发送GET/HTTP/HTTPS请求

    转自:http://blog.csdn.net/zhoufoxcn/article/details/6404236 通用辅助类 下面是我编写的一个辅助类,在这个类中采用了HttpWebRequest中 ...

  7. [ACM] hdu 1025 Constructing Roads In JGShining's Kingdom (最长递增子序列,lower_bound使用)

    Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  8. 用PhpStorm IDE创建GG App Engine PHP应用教程

    在上一篇教程里我们已经介绍了如何为PhpStorm搭建软件环境,那么今天就该是正式的开始创建App了: 3.创建首个Google App Engine PHP Application 现在我们就可以开 ...

  9. 『TCP/IP详解——卷一:协议』读书笔记——01

    从今日起开始认真研读TCP/IP详解这本经典制作,一是巩固我薄弱的计算机网络知识,二来提高我的假期的时间利用率.将心得与思考记录下来,防止白看-哦耶 2013-08-14 18:47:06 第一章 概 ...

  10. media query学习笔记

    原文转自:http://blog.csdn.net/renfufei/article/details/19981133 http://www.cnblogs.com/softlover/archive ...