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

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

2024-08-12 15:34:50   224人阅读

  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. }  
 

 

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


联系
我们