扩展easyui.datagrid，添加数据loading遮罩效果代码
更新时间：2010年11月02日 23:33:47 作者：
easyui可以说是轻量级的前端UI框架，更新到1.2.1支持更多的事件，方法和属性
在使用的过程中，发现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
拿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
您可能感兴趣的文章:
- jQuery EasyUI API 中文文档 - DataGrid数据表格
- Jquery下EasyUI组件中的DataGrid结果集清空方法
- jQuery easyui datagrid动态查询数据实例讲解
- jQuery EasyUI datagrid实现本地分页的方法
- jQuery EasyUI之DataGrid使用实例详解
- jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
- 实现easyui的datagrid导出为excel的示例代码
- 详解EasyUi控件中的Datagrid
- jquery Easyui Datagrid实现批量操作（编辑，删除，添加）
- EasyUI使用DataGrid实现动态列数据绑定
相关文章
这篇文章主要介绍了多功能jQuery树插件zTree实现权限列表简单实例，优异的性能、灵活的配置、多种功能的组合，是树插件zTree最大的优势，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了jquery获得当前html页面源码的方法,涉及jquery针对页面元素的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
jquery本身的动画较之mootools，总体上感觉稍微有点逊色，不过因为其有强大的插件，加上API易读型，易用性等备受青睐，在动画效果方面，API提供了比如一些比较实用的Effects，下面是main方法animate2011-04-04
这篇文章主要为大家详细介绍了jQuery CSS3自定义美化Checkbox实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了jquery判断复选框选中状态以及区分attr和prop，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要为大家详细介绍了jquery实现拖拽添加元素功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了JQuery中extend的用法,实例分析了extend的功能、定义及相关使用技巧,需要的朋友可以参考下2015-02-02
Skippr 是一个超级简单的 jQuery 幻灯片插件。只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了。Skippr 能够自适应窗口宽度，而且导航是独特的条形导航。2015-04-04
在使用jquery操作js时，经常整不明白this与$(this)。抽空仔细测试了一把，记录下来以供在忘记的时候拉出来参考参考！2010-09-09
分享20款美化网站的 jQuery Lightbox 灯箱插件
这篇文章主要介绍了分享20款美化网站的 jQuery Lightbox 灯箱插件,需要的朋友可以参考下2014-10-10
最新评论