jquery扩展easyui的datagrid组建，添加loading方法

easyui可以说是轻量级的前端UI框架，在使用的过程中，发现easyui目前还缺少一些小功能或是未开放出来 。拿datagrid插件来说，数据加载提供了两种方式远程和本地数据加载，但只有远程数据加载时才会显示数据加载的遮罩层，在数据加载完成后隐藏遮罩层；而本地数据加载时则不会出现遮罩，这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要 。

1、扩展datagrid的loading、loaded方法：

(function () {  
    $.extend($.fn.datagrid.methods, {  
        //显示遮罩  
        loading: function (jq, msg) {  
            return jq.each(function () {  
                var panel = $(this).datagrid("getPanel");  
                if (msg == undefined) {  
                    msg = "正在加载数据，请稍候...";  
                }  
                $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel);  
                $("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 });  
            });  
        }  
,  
        //隐藏遮罩  
        loaded: function (jq) {  
            return jq.each(function () {  
                var panel = $(this).datagrid("getPanel");  
                panel.find("div.datagrid-mask-msg").remove();  
                panel.find("div.datagrid-mask").remove();  
            });  
        }  
    });  
})(jQuery); 

使用方法：

_queryGrid.datagrid("loading","玩命加载。。。");
_queryGrid.datagrid("loaded");

2、tab控件扩展loading和loaded方法：

(function () {  
    $.extend($.fn.tabs.methods, {  
        //显示遮罩  
        loading: function (jq, msg) {  
            return jq.each(function () {  
                var panel = $(this).tabs("getSelected");  
                if (msg == undefined) {  
                    msg = "正在加载数据，请稍候...";  
                }  
                $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel);  
                $("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 });  
            });  
        }  
,  
        //隐藏遮罩  
        loaded: function (jq) {  
            return jq.each(function () {  
                var panel = $(this).tabs("getSelected");  
                panel.find("div.datagrid-mask-msg").remove();  
                panel.find("div.datagrid-mask").remove();  
            });  
        }  
    });  
})(jQuery);  

显示遮罩：$("#tabID").tabs("loading",msg) msg--要显示的信息

隐藏遮罩：$("#tabID").tabs("loaded")