• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery EasyUI封装简化操作

jQuery EasyUI封装简化操作

作者:小锋神 字体:[增加 减小] 来源:互联网

小锋神 通过本文主要向大家介绍了Jquery,EasyUI等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本文实例为大家封装了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','电话号



 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 基于jQuery实现表单提交验证
  • jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
  • 超级有用的13个基于jQuery的内容滚动插件和教程
  • jQuery基于Ajax方式提交表单功能示例
  • 删除select中所有option选项jquery代码
  • jQuery中的siblings()是什么意思(推荐)
  • 详解强大的jQuery选择器之基本选择器、层次选择器
  • 解决jquery的.animate()函数在IE6下的问题
  • jQery使网页在显示器上居中显示适用于任何分辨率
  • jquery.cookie.js用法实例详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 给jqGrid数据行添加修改和删除操作链接(之一)
    • jquery validate使用攻略 第四步
    • JQuery实现简单时尚快捷的气泡提示插件
    • jQuery选择没有colspan属性的td的代码
    • 省市区三级联动jquery实现代码
    • S2SH整合JQuery+Ajax实现登录验证功能实现代码
    • jquery实现点击变换导航样式的方法
    • jQuery文件上传控件 Uploadify 详解
    • 使用jquery菜单插件HoverTree仿京东无限级菜单
    • Jquery Ajax的Get方式时需要注意URL地方

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有