zoukankan      html  css  js  c++  java
  • JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码

    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",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","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. });  

     
     在CODE上查看代码片派生到我的代码片
    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. }  
     

     

  • 相关阅读:
    用ASP.Net2005和Oracle9i做模糊查询时报ORA01722错误解决方法
    ☠360与腾讯QQ的战争☠之我见
    【转】GIS原理学习
    【转】JavaScript写的Cookie类
    怀疑自己的笔记本电脑可能受到了网络攻击被人监视或操控
    “密码人”越来越多将会出现“密码危机”
    【转】确保 ASP.NET 应用程序和 Web Services 的安全
    超图软件(SuperMap)学习资料:桌面软件(Deskpro)
    用Sql Server 2000的数据库备份来还原Sql Server 2005中的数据库
    一个有用的Windows服务小程序——用来完成Server端的Socket通信
  • 原文地址:https://www.cnblogs.com/huangf714/p/5854774.html
Copyright © 2011-2022 走看看