扩展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 相关文章推荐
jquery插件之easing 动态菜单
Aug 21 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
浅谈javascript的闭包
Jan 23 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
关于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 8小时时间差的解决方法小结
2009/12/22 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
php中的比较运算符详解
2013/10/28 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
validator验证控件使用代码
2010/11/23 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
Python抓取百度查询结果的方法
2015/07/08 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
python计算n的阶乘的方法代码
2019/10/25 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
JSF的标签库有哪些
2012/04/27 面试题
小学安全工作汇报材料
2014/08/19 职场文书
教师批评与自我批评
2014/10/15 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL