扩展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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
Javascript中typeof 用法小结
May 12 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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
PHP 日期加减的类,很不错
2009/10/10 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
javascript document.referrer 用法
2009/04/30 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
javascript的BOM
2016/05/03 Javascript
Three.js快速入门教程
2016/09/09 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Numpy数组的保存与读取方法
2018/04/04 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python实现简单井字棋游戏
2020/03/04 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
销售类个人求职信范文
2013/09/25 职场文书
机电一体化专业推荐信
2013/12/03 职场文书