zoukankan      html  css  js  c++  java
  • 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",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");
            }



  • 相关阅读:
    Linux下安装maven
    非连续性及反脆弱
    高手是怎么练成的
    思维型大脑
    编写文档五轮模式
    Nginx初识
    ida快捷键
    ida+gdb调试任意平台
    gcc常用命令使用
    ida调试ios应用
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234045.html
Copyright © 2011-2022 走看看