擴(kuò)展easyui.datagrid，添加數(shù)據(jù)loading遮罩效果代碼
更新時(shí)間：2010年11月02日 23:33:47 作者：
easyui可以說(shuō)是輕量級(jí)的前端UI框架，更新到1.2.1支持更多的事件，方法和屬性
在使用的過(guò)程中，發(fā)現(xiàn)easyui目前還缺少一些小功能或是未開(kāi)放出來(lái)
拿datagrid插件來(lái)說(shuō)，數(shù)據(jù)加載提供了兩種方式遠(yuǎn)程和本地?cái)?shù)據(jù)加載，但只有遠(yuǎn)程數(shù)據(jù)加載時(shí)才會(huì)顯示數(shù)據(jù)加載的遮罩層，在數(shù)據(jù)加載完成后隱藏遮罩層；而本地?cái)?shù)據(jù)加載時(shí)則不會(huì)出現(xiàn)遮罩，這應(yīng)該是考慮到本地?cái)?shù)據(jù)加載的速度很快則沒(méi)有使用遮罩的必要
不過(guò)呢，在實(shí)際的項(xiàng)目開(kāi)發(fā)過(guò)程中使用時(shí)，沒(méi)有考慮使用url方式加載數(shù)據(jù)，則采用了loadData方法來(lái)異步加載數(shù)據(jù)，這個(gè)時(shí)候就很有必要顯示遮罩層來(lái)提示用戶當(dāng)前正在加載數(shù)據(jù)，分析easyui的datagrid代碼，削離出其中遠(yuǎn)程數(shù)據(jù)加載時(shí)遮罩顯示代碼，并擴(kuò)展datagrid的方法，代碼如下：
//jquery.datagrid 擴(kuò)展
(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 [];//[]需要加載的數(shù)據(jù)
})());
在datagrid的事件onLoadSuccess中添加
onLoadSuccess:function (){
$("#dataGrid").datagrid("loaded");
}
writer:追夢(mèng)客 20101030 office
拿datagrid插件來(lái)說(shuō)，數(shù)據(jù)加載提供了兩種方式遠(yuǎn)程和本地?cái)?shù)據(jù)加載，但只有遠(yuǎn)程數(shù)據(jù)加載時(shí)才會(huì)顯示數(shù)據(jù)加載的遮罩層，在數(shù)據(jù)加載完成后隱藏遮罩層；而本地?cái)?shù)據(jù)加載時(shí)則不會(huì)出現(xiàn)遮罩，這應(yīng)該是考慮到本地?cái)?shù)據(jù)加載的速度很快則沒(méi)有使用遮罩的必要
不過(guò)呢，在實(shí)際的項(xiàng)目開(kāi)發(fā)過(guò)程中使用時(shí)，沒(méi)有考慮使用url方式加載數(shù)據(jù)，則采用了loadData方法來(lái)異步加載數(shù)據(jù)，這個(gè)時(shí)候就很有必要顯示遮罩層來(lái)提示用戶當(dāng)前正在加載數(shù)據(jù)，分析easyui的datagrid代碼，削離出其中遠(yuǎn)程數(shù)據(jù)加載時(shí)遮罩顯示代碼，并擴(kuò)展datagrid的方法，代碼如下：
復(fù)制代碼 代碼如下:
//jquery.datagrid 擴(kuò)展
(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);
使用方法：
復(fù)制代碼 代碼如下:
$("#dataGrid").datagrid("loadData",(function (){
$("#dataGrid").datagrid("loading");
return [];//[]需要加載的數(shù)據(jù)
})());
在datagrid的事件onLoadSuccess中添加
復(fù)制代碼 代碼如下:
onLoadSuccess:function (){
$("#dataGrid").datagrid("loaded");
}
writer:追夢(mèng)客 20101030 office
您可能感興趣的文章:
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
- jQuery easyui datagrid動(dòng)態(tài)查詢數(shù)據(jù)實(shí)例講解
- jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁(yè)的方法
- jQuery EasyUI之DataGrid使用實(shí)例詳解
- jQuery Easyui DataGrid點(diǎn)擊某個(gè)單元格即進(jìn)入編輯狀態(tài)焦點(diǎn)移開(kāi)后保存數(shù)據(jù)
- 實(shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼
- 詳解EasyUi控件中的Datagrid
- jquery Easyui Datagrid實(shí)現(xiàn)批量操作（編輯，刪除，添加）
- EasyUI使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定
相關(guān)文章
從零開(kāi)始學(xué)習(xí)jQuery (八) 插播:jQuery實(shí)施方案
本篇文章屬于臨時(shí)插播, 用于介紹我在本公司的jQuery實(shí)施方案.2011-02-02
jquery 實(shí)現(xiàn)窗口的最大化不論什么情況
無(wú)論瀏覽器處于什么樣的設(shè)置，都要讓這個(gè)彈出的窗口最大化，那么怎么辦呢？下面為大家介紹下讓瀏覽器窗口從默認(rèn)大小變成我們自己的設(shè)置2013-09-09
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，使用簡(jiǎn)單靈活，同時(shí)還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入漂亮的效果，其中之一就是幻燈片效果的實(shí)現(xiàn)，這是一種在有限的網(wǎng)頁(yè)空間內(nèi)展示系列項(xiàng)目時(shí)非常好的方法2012-05-05
jQuery Ajax前后端使用JSON進(jìn)行交互示例
本篇文章主要介紹了jQuery Ajax前后端使用JSON進(jìn)行交互示例，實(shí)現(xiàn)前端通過(guò)jQuery Ajax傳輸json到后端，后端接收json，對(duì)json進(jìn)行處理，后端返回一個(gè)json給前端，有興趣的可以了解一下。2017-03-03
AJAX和jQuery動(dòng)態(tài)加載數(shù)據(jù)的實(shí)現(xiàn)方法
本文給大家介紹使用ajax和jquery動(dòng)態(tài)加載數(shù)據(jù)的實(shí)現(xiàn)方法，使用jQuery可以簡(jiǎn)化這個(gè)過(guò)程。下面通過(guò)實(shí)例代碼給大家介紹下，需要的的朋友參考下吧2016-12-12
jquery dialog鍵盤(pán)事件代碼，檢測(cè)回車(chē)等事件的觸發(fā)問(wèn)題。2010-08-08
Jquery鼠標(biāo)放上去顯示全名的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Jquery鼠標(biāo)放上去顯示全名的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
基于jQuery的網(wǎng)頁(yè)影音播放器jPlayer的基本使用教程
這篇文章主要介紹了基于jQuery的網(wǎng)頁(yè)影音播放器jPlayer的基本使用教程,文中的示例主要針對(duì)其播放音頻文件的用法,需要的朋友可以參考下2016-03-03
jQuery的運(yùn)行機(jī)制和設(shè)計(jì)理念分析
jQuery是一個(gè)非常優(yōu)秀的JavaScript庫(kù)，與Prototype,YUI,Mootools等眾多的Js類(lèi)庫(kù)相比，它劍走偏鋒，從Web開(kāi)發(fā)實(shí)用的角度出發(fā)，拋除了其它Lib中一些不實(shí)用的東西，為開(kāi)發(fā)者提供了短小精悍的類(lèi)庫(kù)。2011-04-04
jquery ztree實(shí)現(xiàn)樹(shù)的搜索功能
這篇文章主要為大家詳細(xì)介紹了jquery ztree實(shí)現(xiàn)樹(shù)的搜索功能，zTree是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的Tree插件，對(duì)ztree感興趣的小伙伴們可以參考一下2016-02-02