jQuery EasyUI封装简化操作


Posted in Javascript onSeptember 18, 2016

本文实例为大家封装了Jquery EasyUI简化操作,供大家参考,具体内容如下

//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: '用户名已存在' 
 } 
 }); 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
Js apply方法详解
Feb 16 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 #Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 #Javascript
JQuery控制DIV的选取实现方法
Sep 18 #Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 #Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 #Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 #Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 #Javascript
You might like
php桌面中心(三) 修改数据库
2007/03/11 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
初识Node.js
2014/09/03 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
详解js中==与===的区别
2017/01/08 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
python比较两个列表大小的方法
2015/07/11 Python
Python中特殊函数集锦
2015/07/27 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
幼儿园保育员辞职信
2014/01/12 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2014年工程师工作总结
2014/11/25 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle