jquery扩展-遮罩

//jquery.datagrid 扩展 

Js代码  

1. (function (){  
2. $.extend($.fn.datagrid.methods, {  
3. //显示遮罩  
4. loading: function(jq){  
5. return jq.each(function(){  
6. $(this).datagrid("getPager").pagination("loading");  
7. var opts = $(this).datagrid("options");  
8. var wrap = $.data(this,"datagrid").panel;  
9. if(opts.loadMsg)  
10. {  
11. $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:wrap.width(),height:wrap.height()}).appendTo(wrap);  
12. $("<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});  
13. }  
14. });  
15. }  
16. ,  
17. //隐藏遮罩  
18. loaded: function(jq){  
19. return jq.each(function(){  
20. $(this).datagrid("getPager").pagination("loaded");  
21. var wrap = $.data(this,"datagrid").panel;  
22. wrap.find("div.datagrid-mask-msg").remove();  
23. wrap.find("div.datagrid-mask").remove();  
24. });  
25. }  
26. });  
27. })(jQuery);  

使用方法： 

Js代码  

1. $("#dataGrid").datagrid("loadData",(function (){  
2. $("#dataGrid").datagrid("loading");  
3. return [];  //[]需要加载的数据  
4. })());  

在datagrid的事件onLoadSuccess中添加 

Js代码  

1. onLoadSuccess:function (){  
2. $("#dataGrid").datagrid("loaded");  
3. }