easyui可以说是轻量级的前端UI框架,更新到1.2.1支持更多的事件,方法和属性
在使用的过程中,发现easyui目前还缺少一些小功能或是未开放出来
拿datagrid插件来说,数据加载提供了两种方式远程和本地数据加载,但只有远程数据加载时才会显示数据加载的遮罩层,在数据加载完成后隐藏遮罩层;而本地数据加载时则不会出现遮罩,这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要
不过呢,在实际的项目开发过程中使用时,没有考虑使用url方式加载数据,则采用了loadData方法来异步加载数据,这个时候就很有必要显示遮罩层来提示用户当前正在加载数据,分析easyui的datagrid代码,削离出其中远程数据加载时遮罩显示代码,并扩展datagrid的方法,代码如下:
代码
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> // 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);
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> // 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);
使用方法:
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> $( " #dataGrid " ).datagrid( " loadData " ,( function (){
$( " #dataGrid " ).datagrid( " loading " );
return []; // []需要加载的数据
})());
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> $( " #dataGrid " ).datagrid( " loadData " ,( function (){
$( " #dataGrid " ).datagrid( " loading " );
return []; // []需要加载的数据
})());
在datagrid的事件onLoadSuccess中添加
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> onLoadSuccess: function (){
$( " #dataGrid " ).datagrid( " loaded " );
}
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> onLoadSuccess: function (){
$( " #dataGrid " ).datagrid( " loaded " );
}