扩展easyui.datagrid，添加数据loading遮罩效果代码

在使用的过程中，发现easyui目前还缺少一些小功能或是未开放出来拿datagrid插件来说，数据加载提供了两种方式远程和本地数据加载，但只有远程数据加载时才会显示数据加载的遮罩层，在数据加载完成后隐藏遮罩层；而本地数据加载时则不会出现遮罩，这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要不过呢，在实际的项目开发过程中使用时，没有考虑使用url方式加载数据，则采用了loadData方法来异步加载数据，这个时候就很有必要显示遮罩层来提示用户当前正在加载数据，分析easyui的datagrid代码，削离出其中远程数据加载时遮罩显示代码，并扩展datagrid的方法，代码如下：复制代码代码如下: //jquery.datagrid 扩展 (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",width: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"); } writer:追梦客 20101030 office

　　推荐阅读

　　jquery 全局AJAX事件使用代码

复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Ajax - AjaxEvent</title> <script src="../jquery-1.4.3.js" type="text/javascript"></script> <script type="text/java>>>详细阅读

本文标题：扩展easyui.datagrid，添加数据loading遮罩效果代码

地址：http://www.17bianji.com/kaifa2/JS/25474.html

1/2 1