easyui中datagrid自帶loading效果

本文轉載自查看原文 2020-06-06 14:25 894 easyui相關總結

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>

免責聲明！

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

猜您在找 JS-easyui 擴展easyui.datagrid，添加數據loading遮罩效果代碼 easyui Loading效果 jQuery擴展easyui.datagrid，添加數據loading遮罩效果代碼 easyui datagrid 選中行效果 EasyUi datagrid鼠標的懸停效果 easyui datagrid 單選框效果 easyui datagrid 中添加combobox EasyUi Datagrid中footer renderFooter JQuery EasyUI中datagrid的使用 easyui datagrid中 formatter的用法