在使用的過程中，發現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