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 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
基于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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python SVM 线性分类模型的实现
2019/07/19 Python
django fernet fields字段加密实践详解
2019/08/12 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Python基于locals返回作用域字典
2020/10/17 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
医药工作者的求职信范文
2013/09/21 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
支教个人总结
2015/03/04 职场文书
催款函范本大全
2015/06/24 职场文书
Python实现数据的序列化操作详解
2022/07/07 Python