JS-easyui 扩展easyui.datagrid，添加数据loading遮罩效果代码

Posted 2020-08-07 芜明-追星

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

 

用方法

 

 

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

在datagrid的事件onLoadSuccess中添加

 

 

 

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

 

 

1. //采用jquery easyui loading css效果  
2. function ajaxLoading(){  
3.     $("<div class="datagrid-mask"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");  
4.     $("<div class="datagrid-mask-msg"></div>").html("正在处理，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});  
5.  }  
6.  function ajaxLoadEnd(){  
7.      $(".datagrid-mask").remove();  
8.      $(".datagrid-mask-msg").remove();              
9. }  
10.   
11. $.ajax({  
12.       type: ‘POST‘,  
13.       url: ‘sendLettersAgain.action‘,  
14.         data: {id:obj.id},  
15.         beforeSend:ajaxLoading,\发送请求前打开进度条  
16.         success: function(robj){  
17.          ajaxLoadEnd();\任务执行成功，关闭进度条  
18.         }  
19. }）;  

 

 

 

1. //显示进度条  
2. function showProcess(isShow, title, msg) {  
3.    if (!isShow) {  
4.         $.messager.progress(‘close‘);  
5.   
6.           return;  
7.   
8.    }  
9.    var win = $.messager.progress({  
10.          title: title,  
11.           msg: msg  
12.    });  
13. }  
14.   
15.     //弹出框以及系统消息框  
16. function showMsg(title, msg, isAlert) {  
17.     if (isAlert !== undefined && isAlert) {  
18.         $.messager.alert(title, msg);  
19.     } else {  
20.         $.messager.show( {  
21.             title : title,  
22.             msg : msg,  
23.             showType : ‘show‘  
24.         });  
25.     }  
26. }  
27.   
28. //确认框  
29.    function showConfirm(title, msg, callback) {  
30.     $.messager.confirm(title, msg, function(r) {  
31.         if (r) {  
32.             if (jQuery.isFunction(callback))  
33.   
34.                 callback.call();  
35.         }  
36.     });  
37. }