//jquery.datagrid 扩展
(function (){
$.extend($.fn.datagrid.methods, {
//显示遮罩
loading: function(jq){
return jq.each(function(){
$(this).datagrid("getPager").pagination("loading");
var opts = $(this).datagrid("options");
var wrap = $.data(this,"datagrid").panel;
if(opts.loadMsg)
{
$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:wrap.width(),height:wrap.height()}).appendTo(wrap);
$("<div class=\"datagrid-mask-msg\"></div>").html(opts.loadMsg).appendTo(wrap).css({display:"block",left:(wrap.width()-$("div.datagrid-mask-msg",wrap).outerWidth())/,top:(wrap.height()-$("div.datagrid-mask-msg",wrap).outerHeight())/});
}
});
}
,
//隐藏遮罩
loaded: function(jq){
return jq.each(function(){
$(this).datagrid("getPager").pagination("loaded");
var wrap = $.data(this,"datagrid").panel;
wrap.find("div.datagrid-mask-msg").remove();
wrap.find("div.datagrid-mask").remove();
});
}
});
})(jQuery);

使用方法:

$("#dataGrid").datagrid("loadData",(function (){
$("#dataGrid").datagrid("loading");
return [];//[]需要加载的数据
})());

在datagrid的事件onLoadSuccess中添加

onLoadSuccess:function (){
$("#dataGrid").datagrid("loaded");
}

扩展easyui.datagrid,添加数据loading遮罩效果代码 --来自网摘收集的更多相关文章

  1. jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码

    //jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...

  2. JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码

    (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(functio ...

  3. 扩展easyUI tab控件,添加加载遮罩效果

    项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...

  4. 谈谈easyui datagrid 的数据加载(转)

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  5. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  6. 再次谈谈easyui datagrid 的数据加载

    from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...

  7. 谈谈easyui datagrid 的数据加载

    文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...

  8. 一步步实现 easyui datagrid表格宽度自适应,效果非常好

    一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性  fitColumns:true $(function(){ //初始加载,表格宽 ...

  9. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

随机推荐

  1. Http协议:彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法

    转载:http://mp.weixin.qq.com/s/uWPls0qrqJKHkHfNLmaenQ 导语 Http 缓存机制作为 web 性能优化的重要手段,对从事 Web 开发的小伙伴们来说是必 ...

  2. vim中添加多行注释和删除多行注释

    1.多行注释:   a. 按下Ctrl + v,进入列模式;   b. 在行首选择需要注释的行;   c. 按下"I",进入插入模式:  d. 然后输入注释符("//&q ...

  3. ASP.NET Web API - ASP.NET MVC 4 系列

           Web API 项目是 Windows 通信接口(Windows Communication Foundation,WCF)团队及其用户激情下的产物,他们想与 HTTP 深度整合.WCF ...

  4. Linq to Entity经验:表达式转换

    http://www.cnblogs.com/ASPNET2008/archive/2012/10/27/2742434.html 最近一年的项目,我主要负责一些小型项目(就是指企业内部的小项目),在 ...

  5. 与VS集成的若干种代码生成解决方案[博文汇总(共8篇)]

    http://www.cnblogs.com/artech/archive/2010/11/17/CodeGeneration.html [第1篇] 通过CodeDOM定义生成代码的结构 我 不知道大 ...

  6. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

  7. jquery之文档操作

    append(content|fn) 向每个匹配的元素内部添加内容(元素内部) appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部) prepend(content ...

  8. 针对web高并发量的处理

    针对web高并发量的处理 针对高并发量的处理 一个老生常谈的话题了 至于需要运维支持的那些cdn.负载均衡神马的就不赘述了 你们都懂的 虫子在此博文只讲一些从程序角度出发的一些不错的解决方案. 至于从 ...

  9. 最近发现了个js传图预览的函数和大家分享下

    由于浏览器js沙箱,存在不同域,js无法直接调用电脑文件.在之前做传图预览的时候,基本的思路就是, 将图片先保存到服务器中缓存,然后返回一个服务器路径,并显示出图片,然而这样很耗缓存目录文件的.方法也 ...

  10. VR外包团队:长年承接VR虚拟现实外包(应用、游戏、视频、漫游等)

    北京动点飞扬软件,从事外包业务五年,长年承接全景VR视频,全景普通视频外包. 以下是全景VR视频案例(可操作,人不动景物不动,人移动,景物跟随) 欢迎联系我们QQ:372900288 TEL:1391 ...