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 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
JS实现判断移动端PC端功能
Feb 21 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 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python实现基本进制转换的方法
2015/07/11 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
python之array赋值技巧分享
2019/11/28 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
Python logging模块handlers用法详解
2020/08/14 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
PHP开发的一般流程
2013/08/13 面试题
学习十八大的心得体会
2014/09/01 职场文书
离婚财产分配协议书
2014/10/21 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
放飞理想主题班会
2015/08/14 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS