1.最近在做项目的时候，数据表格中的列名也是动态，后台会将列名和数据一起返回给前台，这样，easyui中的datagrid中自带的loading效果将不再生效，所以自己写了一个easyui的loading插件（效果和datagrid 效果加载一样）
插件代码如下:
// loading_line插件 ;(function($){ 'use strict'; var line_defaluts = { showLoading:true, top:330,//距离顶端 '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', 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', '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>