摘要：
Easyui可以说是一个轻量级的前端UI框架。1.2.1的更新支持更多事件。在使用方法和属性的过程中，发现easyui缺少一些小功能或不开放。以数据网格插件为例，数据加载提供了两种方法：远程和本地数据加载。然而，只有在加载远程数据时，才会显示数据加载的屏蔽层，并且在加载数据后屏蔽层会隐藏；而本地数据在加载时不会被屏蔽。这应该是因为本地数据加载很快，所以不需要使用掩码。然而，在实际项目中
easyui可以说是轻量级的前端UI框架，更新到1.2.1支持更多的事件，方法和属性
在使用的过程中，发现easyui目前还缺少一些小功能或是未开放出来
拿datagrid插件来说，数据加载提供了两种方式远程和本地数据加载，但只有远程数据加载时才会显示数据加载的遮罩层，在数据加载完成后隐藏遮罩层；而本地数据加载时则不会出现遮罩，这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要
不过呢，在实际的项目开发过程中使用时，没有考虑使用url方式加载数据，则采用了loadData方法来异步加载数据，这个时候就很有必要显示遮罩层来提示用户当前正在加载数据，分析easyui的datagrid代码，削离出其中远程数据加载时遮罩显示代码，并扩展datagrid的方法，代码如下：
代码
//jquery.datagrid扩展(function(){
$.extend($.fn.datagrid.methods,{
//显示遮罩loading:function(jq){
returnjq.each(function(){
$(this).datagrid("getPager").pagination("loading");
varopts=$(this).datagrid("options");
varwrap=$.data(this,"datagrid").panel;
if(opts.loadMsg)
{
$("<divclass=\"datagrid-mask\"></div>").css({display:"block",wrap.width(),height:wrap.height()}).appendTo(wrap);
$("<divclass=\"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){
returnjq.each(function(){
$(this).datagrid("getPager").pagination("loaded");
varwrap=$.data(this,"datagrid").panel;
wrap.find("div.datagrid-mask-msg").remove();
wrap.find("div.datagrid-mask").remove();
});
}
});
})(jQuery);
$.extend($.fn.datagrid.methods,{
//显示遮罩loading:function(jq){
returnjq.each(function(){
$(this).datagrid("getPager").pagination("loading");
varopts=$(this).datagrid("options");
varwrap=$.data(this,"datagrid").panel;
if(opts.loadMsg)
{
$("<divclass=\"datagrid-mask\"></div>").css({display:"block",wrap.width(),height:wrap.height()}).appendTo(wrap);
$("<divclass=\"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){
returnjq.each(function(){
$(this).datagrid("getPager").pagination("loaded");
varwrap=$.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").datagrid("loading");
return[];//[]需要加载的数据})());
在datagrid的事件onLoadSuccess中添加
onLoadSuccess:function(){
$("#dataGrid").datagrid("loaded");
}
$("#dataGrid").datagrid("loaded");
}
writer:追梦客 20101030 office