easyui可以说是轻量级的前端UI框架,更新到1.2.1支持更多的事件,方法和属性。
在使用的过程中,发现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");
}
PS:本问转载 http://kalin73.iteye.com/blog/932286
分享到:
相关推荐
当使用 EasyUI 的数据网格(datagrid)进行异步加载时,可以开启 `loadingMsg` 参数,这样在数据加载过程中会自动显示遮罩层,提高用户体验。 7. **遮罩层的兼容性和性能优化** 考虑到浏览器兼容性,确保你的遮罩...
### 遮罩 EasyUI 的知识点详解 #### 一、EasyUI 概述与遮罩功能简介 **EasyUI** 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用程序。其中,“遮罩”功能是...
整个文档通过提供具体的函数实现代码,为开发者展示了如何在使用jQuery EasyUI进行开发时,实现页面加载时的等待提示和操作等待提示的两种场景。这些知识点对于前端开发者来说,可以很好地提升用户体验,避免用户在...
在本文中,我们将深入探讨如何使用jQuery的AjaxFileUpload插件来实现文件上传,并结合EasyUI的loading效果,以防止用户在文件上传过程中进行多次点击,确保上传过程顺利完成。首先,我们来了解一下AjaxFileUpload的...
jQuery EasyUI 是一款基于 jQuery 的前端开发框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。EasyUI 的 API 包含了多种组件和它们的相关属性,使得开发者能够定制和控制界面的行为和外观。以下是...