扩展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 相关文章推荐
DIV菜单层实现代码
Nov 19 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
纯js实现动态时间显示
Sep 07 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
JS实现拼图游戏
Jan 29 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
关于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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
杏林同学录(九)
2006/10/09 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python Pandas 箱线图的实现
2019/07/23 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
python字符串的index和find的区别详解
2020/06/20 Python
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
继电保护工岗位职责
2014/01/05 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
企业人事任命书
2014/06/05 职场文书
企业文化标语口号
2014/06/09 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
2016中秋节广告语
2016/01/28 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
Python中requests库的用法详解
2022/06/05 Python