Easyui 遮罩实现方式
项目中在提交Ajax请求时,后台处理数据时间有点长,需要一个遮罩,就随便找了一个实现一下:包含两种方式,个人比较喜欢第二种
第一种:
$("#saveMaterial").click(function(){
$.messager.progress({
title:'请稍后',
msg:'数据保存中...'
});
var url = PREFIX_LOCATION+"/cpv3MaterialCtrl/saveMaterial";
var params = {
"quotationId":quotationId,
"universities":QUOTATIONMATERIAL.universities,
"universityChange":QUOTATIONMATERIAL.universityChange
};
$.post(url,{params:JSON.stringify(params)},function(data){
if(data && data.flag) {
QUOTATIONMATERIAL.universities = [];
opener.CostPage.initAndRefresh(true);
$.messager.progress('close');//处理完成之后关闭
$.messager.alert("操作提示",data.message,"info", function() {
window.close();
});
} else {
$.messager.progress('close');
$.messager.alert("操作提示",data.message,"error");
}
},"json");
});
效果如图:
第二种:
$.messager.confirm("提示","确认要生成版本么?",function(action){
if(action){
$("<div id=\"procss\" class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
$("<div id=\"procssMark\" class=\"datagrid-mask-msg\"></div>").html("正在生成报价单版本...").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
/*$.messager.progress({
title:'请稍后',
msg:'正在生成报价单版本...'
});*/
$.ajax({
url : '${ctx}/cpv3QuotationCtrl/createVersion?projectId='+projectId+'"ationId='+data[0].QUOTATION_ID,
type : "get",
cache : false,
success : function(back) {
if (back.flag) {
//$.messager.progress('close');
$("#procss").remove();//处理完之后移除
$("#procssMark").remove();//处理完成之后移除
$.messager.alert("提示信息","版本创建成功!","info");
$("#personManage").datagrid("reload");
} else {
alert(back.message);
}
},
error : function(back) {
CDialog("操作失败:ajax返回异常");
}
});
}
})
效果如图
Easyui 遮罩实现方式的更多相关文章
- EasyUI Tree递归方式获取JSON
最近需要用到EASYUI中的TREE功能,以前我是直接拼接成<UL><LI>发现这样拼完之后在更改树后对树的刷新不是很理想,现改用JSON格式,首先分析TREE中JOSN格式如 ...
- easyui 生成tas方式
1.采用<a>标签形式 <div id="tabs" style="width:100%;"> <ul> <li id ...
- EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)
在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎 ...
- springMVC注解方式+easyUI+MYSQL配置实例
刚接触springMVC,使用的注解方式,也在学习阶段,所以把自己学习到的记下来.本文利用springMVC从数据库读取用户信息为例,分享一下. 1.准备相关架包及资源.因为使用springMVC+e ...
- 基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理
在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是其他表里面的名称字段:有时候引用的是外键ID,有时候引用的是名称文本内容:正确快速使用下拉列表的 ...
- 基于jeasyui的遮罩扩展[修复链式bug]
说明和使用方法看下面代码,直接复制下面代码保存为js文件,引用即可. 遮罩效果从datagrid中提取,针对jquery进行优化. 下载地址(附Demo):http://pan.baidu.com/s ...
- Easyui 基于kindeditor的扩展
源码 /** * Author : ____′↘夏悸 * Easyui KindEditor的简单扩展. * 有了这个之后,你就可以像使用Easyui组件的方式使用KindEditor了 * 前提是你 ...
- JQuery EasyUI学习记录(三)
1.jQuery EasyUI messager使用方式 1.1 alert方法 $(function(){ //1.alert方法---提示框 $.messager.alert("标题&q ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理
http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是 ...
随机推荐
- Ionic学习笔记1_基本布局
<body> <!-- 头部 --> bar里嵌入子元素:title,button,button-bar和 inpu ...
- 219. Contains Duplicate II【easy】
219. Contains Duplicate II[easy] Given an array of integers and an integer k, find out whether there ...
- iOS自定义转场动画实战讲解
iOS自定义转场动画实战讲解 转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerA ...
- windows程序 UAC设置,程序运行提示使用管理员权限运行的方法
在近期的任务中需要对光盘中的程序运行时获取管理员权限运行程序.这个功能的实现需要改变工程的配置. 在vs2015中,使用鼠标右击解决方案管理器中的工程->属性->链接器->清单文件. ...
- PHP中插件机制的一种实现方案
这篇文章的出发点是我对插件机制的理解,及其在PHP中的实现.此方案仅是插件机制在PHP中的实现方案之一,写下来和大家分享,欢迎大家一起讨论. 插件,亦即Plug-in,是指一类特定的功能模块(通常由第 ...
- 通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素.可以通过 text/HTML.jQuery 或者 JavaScript/DOM 来创建新元素. 在下面的例子中,我们创建若干 ...
- python 案例:使用BeautifuSoup4的爬虫
我们以腾讯社招页面来做演示:http://hr.tencent.com/position.php?&start=10#a 使用BeautifuSoup4解析器,将招聘网页上的职位名称.职位类别 ...
- WPF绑定Binding及模式
绑定,就是把一个对象属性的值绑定在别的对象的属性上 1. 默认绑定 public class Company { public string Name { get; set; } } XAML代码 1 ...
- struts2之constant 讲解 (转)
struts.serve.static.browserCache 该属性设置浏览器是否缓存静态内容.当应用处于开发阶段时,我们希望每次请求都获得服务器的最新响应,则可设置该属性为false. stru ...
- jmeter操作myql数据库
1.先安装mysql的驱动mysql-connector-java-5.1.7-bin.jar 配置jdbc的connection configuration Database Url :jdbc:m ...