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

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

 

用方法

 

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

在datagrid的事件onLoadSuccess中添加

 

 

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

 

//采用jquery easyui loading css效果
function ajaxLoading(){
    $("<div class="datagrid-mask"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
    $("<div class="datagrid-mask-msg"></div>").html("正在处理，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
 }
 function ajaxLoadEnd(){
     $(".datagrid-mask").remove();
     $(".datagrid-mask-msg").remove();
}

$.ajax({
      type: 'POST',
      url: 'sendLettersAgain.action',
        data: {id:obj.id},
        beforeSend:ajaxLoading,\发送请求前打开进度条
        success: function(robj){
         ajaxLoadEnd();\任务执行成功，关闭进度条
        }
}）;

 

//显示进度条
function showProcess(isShow, title, msg) {
   if (!isShow) {
        $.messager.progress('close');

          return;

   }
   var win = $.messager.progress({
         title: title,
          msg: msg
   });
}

    //弹出框以及系统消息框
function showMsg(title, msg, isAlert) {
    if (isAlert !== undefined && isAlert) {
        $.messager.alert(title, msg);
    } else {
        $.messager.show( {
            title : title,
            msg : msg,
            showType : 'show'
        });
    }
}

//确认框
   function showConfirm(title, msg, callback) {
    $.messager.confirm(title, msg, function(r) {
        if (r) {
            if (jQuery.isFunction(callback))

                callback.call();
        }
    });
}