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


Posted in Javascript onNovember 02, 2010

在使用的过程中,发现easyui目前还缺少一些小功能或是未开放出来

拿datagrid插件来说,数据加载提供了两种方式远程和本地数据加载,但只有远程数据加载时才会显示数据加载的遮罩层,在数据加载完成后隐藏遮罩层;而本地数据加载时则不会出现遮罩,这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要

不过呢,在实际的项目开发过程中使用时,没有考虑使用url方式加载数据,则采用了loadData方法来异步加载数据,这个时候就很有必要显示遮罩层来提示用户当前正在加载数据,分析easyui的datagrid代码,削离出其中远程数据加载时遮罩显示代码,并扩展datagrid的方法,代码如下:

//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())/2,top:(wrap.height()-$("div.datagrid-mask-msg",wrap).outerHeight())/2}); 
} 
}); 
} 
, 
//隐藏遮罩 
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"); 
}

writer:追梦客 20101030 office
Javascript 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
javascript实现的简单计时器
Jul 19 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
Vue渲染函数详解
Sep 15 Javascript
Vue header组件开发详解
Jan 26 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
JS实现随机点名器
Apr 12 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
关于document.cookie的使用javascript
Oct 29 #Javascript
深入理解JavaScript定时机制
Oct 29 #Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 #Javascript
ExtJS 入门
Oct 29 #Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 #Javascript
javascript天然的迭代器
Oct 29 #Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 #Javascript
You might like
星际玩家的三大定律
2020/03/04 星际争霸
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
php处理带有中文URL的方法
2016/07/11 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
vue debug 二种方法
2018/09/16 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
Python中如何获取类属性的列表
2016/12/26 Python
利用Python如何生成便签图片详解
2018/07/09 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
优秀士兵个人事迹材料
2014/01/19 职场文书
教师师德反思材料
2014/02/15 职场文书
创文明城市标语
2014/06/16 职场文书
高三语文复习计划
2015/01/19 职场文书
向女朋友道歉的话
2015/01/20 职场文书
2015年度保密工作总结
2015/04/24 职场文书
python单向链表实例详解
2022/05/25 Python