jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码

        //jquery.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)
                        {
                            $("
").css({display:"block",width:wrap.width(),height:wrap.height()}).appendTo(wrap); $("
").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"); }

你可能感兴趣的:(【40】,easyui)