欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

擴展easyui.datagrid，添加數(shù)據(jù)loading遮罩效果代碼

 更新時間：2010年11月02日 23:33:47   作者：  
easyui可以說是輕量級的前端UI框架，更新到1.2.1支持更多的事件，方法和屬性
在使用的過程中，發(fā)現(xiàn)easyui目前還缺少一些小功能或是未開放出來

拿datagrid插件來說，數(shù)據(jù)加載提供了兩種方式遠程和本地數(shù)據(jù)加載，但只有遠程數(shù)據(jù)加載時才會顯示數(shù)據(jù)加載的遮罩層，在數(shù)據(jù)加載完成后隱藏遮罩層；而本地數(shù)據(jù)加載時則不會出現(xiàn)遮罩，這應(yīng)該是考慮到本地數(shù)據(jù)加載的速度很快則沒有使用遮罩的必要

不過呢，在實際的項目開發(fā)過程中使用時，沒有考慮使用url方式加載數(shù)據(jù)，則采用了loadData方法來異步加載數(shù)據(jù)，這個時候就很有必要顯示遮罩層來提示用戶當(dāng)前正在加載數(shù)據(jù)，分析easyui的datagrid代碼，削離出其中遠程數(shù)據(jù)加載時遮罩顯示代碼，并擴展datagrid的方法，代碼如下：
復(fù)制代碼 代碼如下:

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

使用方法：
復(fù)制代碼 代碼如下:

$("#dataGrid").datagrid("loadData",(function (){
$("#dataGrid").datagrid("loading");
return [];//[]需要加載的數(shù)據(jù)
})());

在datagrid的事件onLoadSuccess中添加
復(fù)制代碼 代碼如下:

onLoadSuccess:function (){
$("#dataGrid").datagrid("loaded");
}

writer:追夢客 20101030 office

相關(guān)文章

  • 從零開始學(xué)習(xí)jQuery (八) 插播:jQuery實施方案

    從零開始學(xué)習(xí)jQuery (八) 插播:jQuery實施方案

    本篇文章屬于臨時插播, 用于介紹我在本公司的jQuery實施方案.
    2011-02-02
  • jquery 實現(xiàn)窗口的最大化不論什么情況

    jquery 實現(xiàn)窗口的最大化不論什么情況

    無論瀏覽器處于什么樣的設(shè)置，都要讓這個彈出的窗口最大化，那么怎么辦呢？下面為大家介紹下讓瀏覽器窗口從默認大小變成我們自己的設(shè)置
    2013-09-09
  • 很酷的60款jQuery 幻燈片演示和下載

    很酷的60款jQuery 幻燈片演示和下載

    jQuery 是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項目中加入漂亮的效果，其中之一就是幻燈片效果的實現(xiàn)，這是一種在有限的網(wǎng)頁空間內(nèi)展示系列項目時非常好的方法
    2012-05-05
  • jQuery Ajax前后端使用JSON進行交互示例

    jQuery Ajax前后端使用JSON進行交互示例

    本篇文章主要介紹了jQuery Ajax前后端使用JSON進行交互示例，實現(xiàn)前端通過jQuery Ajax傳輸json到后端，后端接收json，對json進行處理，后端返回一個json給前端，有興趣的可以了解一下。
    2017-03-03
  • AJAX和jQuery動態(tài)加載數(shù)據(jù)的實現(xiàn)方法

    AJAX和jQuery動態(tài)加載數(shù)據(jù)的實現(xiàn)方法

    本文給大家介紹使用ajax和jquery動態(tài)加載數(shù)據(jù)的實現(xiàn)方法，使用jQuery可以簡化這個過程。下面通過實例代碼給大家介紹下，需要的的朋友參考下吧
    2016-12-12
  • jquery dialog鍵盤事件代碼

    jquery dialog鍵盤事件代碼

    jquery dialog鍵盤事件代碼，檢測回車等事件的觸發(fā)問題。
    2010-08-08
  • Jquery鼠標(biāo)放上去顯示全名的實現(xiàn)方法

    Jquery鼠標(biāo)放上去顯示全名的實現(xiàn)方法

    下面小編就為大家?guī)硪黄狫query鼠標(biāo)放上去顯示全名的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • 基于jQuery的網(wǎng)頁影音播放器jPlayer的基本使用教程

    基于jQuery的網(wǎng)頁影音播放器jPlayer的基本使用教程

    這篇文章主要介紹了基于jQuery的網(wǎng)頁影音播放器jPlayer的基本使用教程,文中的示例主要針對其播放音頻文件的用法,需要的朋友可以參考下
    2016-03-03
  • jQuery的運行機制和設(shè)計理念分析

    jQuery的運行機制和設(shè)計理念分析

    jQuery是一個非常優(yōu)秀的JavaScript庫，與Prototype,YUI,Mootools等眾多的Js類庫相比，它劍走偏鋒，從Web開發(fā)實用的角度出發(fā)，拋除了其它Lib中一些不實用的東西，為開發(fā)者提供了短小精悍的類庫。
    2011-04-04
  • jquery ztree實現(xiàn)樹的搜索功能

    jquery ztree實現(xiàn)樹的搜索功能

    這篇文章主要為大家詳細介紹了jquery ztree實現(xiàn)樹的搜索功能，zTree是利用 JQuery 的核心代碼，實現(xiàn)一套能完成大部分常用功能的Tree插件，對ztree感興趣的小伙伴們可以參考一下
    2016-02-02

最新評論