文档章节

jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码

深圳大道
 深圳大道
发布于 2016/12/29 15:35
字数 153
阅读 10
收藏 0
//jquery.datagrid 扩展加载数据Loading效果
        (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");
        }

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/53284157

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
easyui为tab添加遮罩层

项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程。tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造...

文文1
2015/08/03
222
0
鼠标移入移出效果 -- jQuery/Vue版

元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、...

bestvist
2018/06/22
0
0
jQuery实现带遮罩层的消息框滑入滑出效果

首先,使用一个遮罩层来遮住整个页面,在遮罩层上显示一个消息框,消息框还可以被关闭,最后使用jQuery使得消息框从页面顶部滑下,实现的效果如下: 遮罩层的样式如下: 样式说明了不论在哪种...

罗盛力
2012/02/17
1K
1
Jquery结合CSS实现选项卡功能

先看效果图: 现在就让我们看看实现的过程,首先看看 html 代码: <div id="category" class="category boxshadow"> <ul class="nav"> <li> <a id="nvajquery" class="current" href="#jque......

前端老手
09/22
9
0
bDialog v2.0 发布,增加消息对话框、遮罩等新功能

下拉分页选择插件 bDialog v2.0 发布了,插件更新内容: 修复窗口最大化后,内部iframe高度没有最大化的问题 重构代码结构 增加窗口打开后的动画效果 增加国际化多语言支持 增加bDialog.ale...

TerryZ
2017/09/04
1K
15

没有更多内容

加载失败,请刷新页面

加载更多

iOS苹果应用IPA一键签名工具及重签教程

开心签名工具,是一款跨平台ios签名和重签名工具。 同时支持在windows、linux、mac运行,数据同步,方便使用及管理! 开心重签名工具官网 功能特点 1、支持图形界面及命令行重签(部署到服务...

tintong
2分钟前
0
0
2.4G有源卡核心芯片供应商

有源2.4G RFID的防盗标签,在与无源标签相比较,通信距离远,通信时效高。我司的SI24R2E这颗芯片专门为2.4G有源标签而设计,具有低功耗,发送距离远,厂商设计简单等优势;广泛应用于现在城市...

文刀石
8分钟前
1
0
设置Ubuntu16.04启动为命令行界面

1. 修改/etc/default/grub文件,将GRUB_CMDLINE_LINUX_DEFAULT设置成”quiet splash 3” 2. 使用命令update-grub使得在/boot下重新生成GRUB2配置文件。 3. 重启...

JosiahMg
8分钟前
1
0
C++基础知识点

计算机语言 计算机不能理解高级语言,只能理解机器语言,必须要将高级语言翻译成机器语言,翻译的方式有两种,一种是编译,一种是解释 解释型语言,在运行程序时进行翻译,每个语句在执行时逐...

大瑞清_liurq
15分钟前
1
0
EFCore 多条数据更新不能同时savechanges()的解决方法

1 在ModelContext定义下增加var transaction = ctx.Database.BeginTransaction(); 1.2 在最后一个SaveChanges()后增加transaction.Commit(); 3 在finally的if (sMsgCode != "")分支中增加tra......

_Somuns
18分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部