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)
                        {
                            $("<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");
        }




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM