easyui中datagrid自带loading效果

1.最近在做项目的时候，数据表格中的列名也是动态，后台会将列名和数据一起返回给前台，这样，easyui中的datagrid中自带的loading效果将不再生效，所以自己写了一个easyui的loading插件（效果和datagrid 效果加载一样）

 插件代码如下:

// loading_line插件
;(function($){
    'use strict';
    var line_defaluts = {
        showLoading:true,
        top:330,//距离顶端
        width:'100%',
        msg:'数据正在努力加载中...'
    };
    $.fn.extend({
        "loading": function(options) {
            var opts = $.extend({}, line_defaluts, options); //使用jQuery.extend 覆盖插件默认参数
            var This = $(this); //保存当前this的对象
            This.css({
                top:opts.top+'px',
                width: opts.width,
                height: '200px',
                lineHeight: '200px',
                position: 'absolute',
                zIndex: '1000',
            });
            var innerNode=$("<div><img src='/easyui/themes/default/images/loading.gif' />&nbsp;"+opts.msg+"</div>");  // loading图片src 需要替换
            innerNode.css({
                backgroundColor: 'white',
                width: '160px',
                height: '40px',
                lineHeight: '40px',
                border: '2px solid #95B8E7',
                textAlign: 'center',
                margin: '75px auto',
                fontSize: '12px'
            });

            This.html(innerNode[0]);
            return this.each(function(index,el){
                if(opts.showLoading){                                             
                         $(el).css({
                             display:'block'
                         });                         
                }else{
                    $(el).css({
                        display:'none'
                    });                    
                }
            });     
        }
    });    
})(jQuery);

html中使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>easyui中datagrid自带loading效果</title>
        <script type="text/javascript" src="/easyui_1.5.2/jquery.min.js"></script>
        <script type="text/javascript" src="plugin.js"></script>  
        <script type="text/javascript">
            $(function(){
                $('#load').loading();        
                $('#btn').click(function(){
                    $('#load').loading({
                        showLoading:false
                    });
                });
                
            });
        </script>
         
    </head>
    <body>
        <button id="btn"> 点击</button>
        <div id="load" ></div>
        
    </body>
</html>

 

posted @ 2020-06-06 14:25  雨阳_yy  阅读(1573)  评论(0)  编辑  收藏  举报