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' /> "+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>