【easyui】扩展easyui.datagrid,添加数据loading遮罩效果代码-datagrid

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【扩展easyui.datagrid，添加数据loading遮罩效果代码】，下面是详细的讲解！

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

//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);

关于扩展easyui.datagrid，添加数据loading遮罩效果代码的用户互动如下：

　　相关问题：jquery easyui 的 datagrid如何动态加载数据?

　　答：使用datagrid的【load】方法，例如： $('#dg').datagrid('load',{code: '01',name: 'name01'});ajax调用后台方法，获得json数据后在回调函数中去初始化datagrid就可以。 可以参考官方文档：http://www.jeasyui.com/documentation/index.php# >>详细

　　相关问题：easyui版本1.3.5,datagrid扩展编辑editor类型,如何...

　　答：var tab = $('#tt').tabs('getTab',0); // 取得第一个tab $('#tt').tabs('update', { tab: tab, options: { title: 'New Title' } }); >>详细

　　相关问题：easyui 中弹出窗口的datagrid数据加载显示，怎么lo...

　　答：相关方法： load param 加载第一页数据，param将代替默认查询参数，注意的是该方法只适用于url方式. reload param 刷新当前页数据，与load方法不同的时候reload方法刷新当前页数据，而load方法会跳到第一页然后刷新. >>详细