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

刺骨的言语ヽ痛彻心扉 2022-04-06 03:00 337阅读 0赞

在使用的过程中，发现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");   
\}