jQuery EasyUI封装简化操作
更新时间:2016年10月3日 10:01 点击:2059
本文实例为大家封装了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: '用户名已存在' } }); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了jquery实现加载更多"转圈圈"效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-11-10
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- 这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-05
- JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
- jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div)。 (1)先介绍jquery.offset().top / left css: 复制代码 代码如下: *{ mar...2013-10-13
- 有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时,在内容输入框中输入完内容后,可以点击“提交”按钮来发表内容。可是,如果你够“懒”,你可以不用动鼠标,只需按...2015-10-23
- 在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互目的....2016-04-27
- 直接为大家介绍制作过程,希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
- 本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考,具体如下:这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码,相当不错,因考虑功能的实现,所以没有怎么美化,不过这样也好,可以给大家更...2015-10-21
- 本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考,具体如下:这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在“上一页”“下一页”上,立即浮现出所对应的图...2015-10-30
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
这篇文章将使用jQuery,并结合PHP,将Fckeditor发布的内容进行分页,并且实现无刷新切换页面。 本文假设你是WEB开发人员,掌握了jQuery和PHP相关知识,并且熟知Fckeditor的配置和使用。...2015-10-23