扩展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 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
javascript与有限状态机详解
May 08 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
小程序中this.setData的使用和注意事项
Aug 28 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文件操作的详解
2013/06/05 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php两种无限分类方法实例
2015/04/21 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
python实现斗地主分牌洗牌
2020/06/22 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
工作自我评价怎么写
2014/01/29 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
学生个人总结范文
2015/02/15 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android