扩展easyui.datagrid，添加数据loading遮罩

    easyui可以说是轻量级的前端UI框架，更新到1.2.1支持更多的事件，方法和属性

    在使用的过程中，发现easyui目前还缺少一些小功能或是未开放出来

    拿datagrid插件来说，数据加载提供了两种方式远程和本地数据加载，但只有远程数据加载时才会显示数据加载的遮罩层，在数据加载完成后隐藏遮罩层；而本地数据加载时则不会出现遮罩，这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要

    不过呢，在实际的项目开发过程中使用时，没有考虑使用url方式加载数据，则采用了loadData方法来异步加载数据，这个时候就很有必要显示遮罩层来提示用户当前正在加载数据，分析easyui的datagrid代码，削离出其中远程数据加载时遮罩显示代码，并扩展datagrid的方法，代码如下：

代码

// jquery.datagrid 扩展
( 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 " );
}

 

　　writer:追梦客 20101030 office

转载于:https://www.cnblogs.com/dreamcat/archive/2010/10/30/easyui_datagrid_mask.html