扩展easyui.datagrid,添加数据loading遮罩效果代码 --来自网摘收集

时间:2022-09-01 10:51:48
//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())/,top:(wrap.height()-$("div.datagrid-mask-msg",wrap).outerHeight())/});
}
});
}
,
//隐藏遮罩
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");
}

扩展easyui.datagrid,添加数据loading遮罩效果代码 --来自网摘收集的更多相关文章

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

    //jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...

  2. JS-easyui 扩展easyui&period;datagrid,添加数据loading遮罩效果代码

    (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(functio ...

  3. 扩展easyUI tab控件,添加加载遮罩效果

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

  4. 谈谈easyui datagrid 的数据加载&lpar;转&rpar;

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  5. &lbrack;转载&rsqb;再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  6. 再次谈谈easyui datagrid 的数据加载

    from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...

  7. 谈谈easyui datagrid 的数据加载

    文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...

  8. 一步步实现 easyui datagrid表格宽度自适应,效果非常好

    一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性  fitColumns:true $(function(){ //初始加载,表格宽 ...

  9. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

随机推荐

  1. 误删&sol;usr文件夹解决办法

    http://blog.chinaunix.net/uid-2623904-id-3044156.html http://www.centoscn.com/CentOS/Intermediate/20 ...

  2. 【Java每日一题】20161025

    20161024问题解析请点击今日问题下方的"[Java每日一题]20161025"查看 package Oct2016; import static java.lang.Math ...

  3. Dynamic CRM 2013学习笔记(六)备份和恢复

      这节我们将讨论下怎么维护CRM,包括以下主要内容: 备份CRM DB 备份CRM 系统 恢复CRM DB 恢复 CRM 系统   一. 备份CRM DB 下面的步骤将为CRM DB创建一个维护计划 ...

  4. Docker Swarm 中最重要的概念- 每天5分钟玩转 Docker 容器技术(94)

    从主机的层面来看,Docker Swarm 管理的是 Docker Host 集群.所以先来讨论一个重要的概念 - 集群化(Clustering). 服务器集群由一组网络上相互连接的服务器组成,它们一 ...

  5. protobuf&lpar;quickStart&rpar;

    1.简介 Protocol Buffers是Google开发一种数据描述语言,能够将数据进行序列化,可用于数据存储.通信协议等方面. 可以理解成更快.更简单.更小的JSON或者XML,区别在于Prot ...

  6. Xaml Controls Gallery 的五个没有用的控件

    HyperlinkButton 功能:这个控件可以实现点击按钮后跳到另一个按钮的功能. 我觉得这个功能有些多余,据我了解,一些深受欢迎的游戏大都具备的一个特点,那就是操作简单,界面中不会出现冗余的东西 ...

  7. Magento 2 Plugin - Interceptor - Magento 2插件 - 拦截器-插件开发

    Magento 2 Plugin - Interceptor - Magento 2插件 - 拦截器 Magento 2 Plugin is a technical plugin for your b ...

  8. Mac 绑定Gitlab或者GitHub帐号,从新生成公钥

    1.SSH(Secure Shell)是一种安全协议,在你的电脑与GitLab服务器进行通信时,我们使用SSH密钥(SSH Keys)认证的方式来保证通信安全. 2.创建 SSH密钥,并将密钥中的公钥 ...

  9. &lbrack;py&rsqb;python中的特殊类class type和类的两面性图解

    生活中的模具 生活中 编程 万物都从无到有, 起于烟尘 () 生产原料,铁 object 车床-生产各类模具 元类即metaclass,对应python的class type 模具-生产各类实在的物品 ...

  10. int、char、long各占多少字节数

    Java基本类型占用的字节数:1字节: byte , boolean2字节: short , char4字节: int , float8字节: long , double 编码与中文:Unicode/ ...