扩展easyUI tab控件添加加载遮罩效果

Easyui技术学习，更多知识请访问https://www.itkc8.com

 		(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); 

用法例如：

 

 

var param = {
    				querytype : "0",
        			service_type : service_type,    
        			queryTimeS : queryTimeS,
        			queryTimeE : queryTimeE};
    			var url = "QuerySmsAction!querySmsInfo.action";
    			
    			$.ajax({
  					url:url,
  					type:"post",
  					data:param,
 					dataType:'json',
 					
 					beforeSend:function(){
						$("#tt").datagrid("loading"); 
              		},
              
 					success:function(json){
  						$("#tt").datagrid("loadData",json);
  					},
  					error : function(){
		 				$.messager.show({
									msg : '数据查询失败,请您重新查询!',
									title : '提示'
								});
		 			},
		 			
		 			complete:function(){
            			$("#tt").datagrid("loaded");
              		}
              		
 				});

记得配置

 

 

loadMsg="总数查询，正在加载"

 

 

Easyui技术学习，更多知识请访问https://www.itkc8.com