扩展easyui.datagrid，添加数据loading遮罩效果代码【jquery】

web前端|js教程扩展easyui.datagrid，添加数据loading遮罩效果代码【jquery】

easyui,datagrid

web前端-js教程

在使用的过程中，发现easyui目前还缺少一些小功能或是未开放出来

采购供应平台源码,如何清理加速ubuntu,幸福的爬虫小说,php期末测试,合肥 seo培训lzw

拿datagrid插件来说，数据加载提供了两种方式远程和本地数据加载，但只有远程数据加载时才会显示数据加载的遮罩层，在数据加载完成后隐藏遮罩层；而本地数据加载时则不会出现遮罩，这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要

无极源码别人的妻子,ubuntu作为主力,tomcat架构设计模式,金刚自带爬虫,php详细错误,福州市seo推广知识竞争优势lzw

不过呢，在实际的项目开发过程中使用时，没有考虑使用url方式加载数据，则采用了loadData方法来异步加载数据，这个时候就很有必要显示遮罩层来提示用户当前正在加载数据，分析easyui的datagrid代码，削离出其中远程数据加载时遮罩显示代码，并扩展datagrid的方法，代码如下：

留言墙源码,ubuntu键盘不能打字,tomcat每秒请求数量,python爬虫412,php变量函数检测,仓山区一般seo服务费lzw

 
//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) 
{ 
$("
").css({display:"block",width:wrap.width(),height:wrap.height()}).appendTo(wrap); 
$("
").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