扩展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 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
this和执行上下文实现代码
Jul 01 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
vue 文件目录结构详解
Nov 24 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
详细分析vue表单数据的绑定
Jul 20 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自动生成月历代码
2006/10/09 PHP
php去除重复字的实现代码
2011/09/16 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
5 cool javascript apps
2007/03/24 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
Python中的super用法详解
2015/05/28 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
社区学习十八大感想
2014/01/22 职场文书
十佳护士获奖感言
2014/02/18 职场文书
销售员试用期自我评价
2014/09/15 职场文书
收入证明申请书
2015/06/12 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL