jquery的easyui中的datagrid刷新时的问题
发布网友
发布时间：2022-05-17 05:28
共3个回答
懂视网
时间：2022-05-17 09:50
拿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)
{
$("").css({display:"block",width:wrap.width(),height:wrap.height()}).appendTo(wrap);
$("").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
热心网友
时间：2022-05-17 06:58
.datagrid-mask{
opacity:0;
filter:alpha(opacity=0);
}
.datagrid-mask-msg{
opacity:0;
filter:alpha(opacity=0);
}
就能将刷新动画去掉~
不过我有质疑就是你1-2秒刷新一次~这个是ajax刷新~如果上一次结果没有回来~或者说刷新获取数据的时间大于1-2秒~那你页面岂不是一直没有数据~获取数据用时1-2s的情况还是挺多的~
热心网友
时间：2022-05-17 08:16
