jquery扩展easyui的datagrid组建，添加loading方法

秒速五厘米 2021-06-24 14:34 529阅读 0赞

easyui可以说是轻量级的前端UI框架，在使用的过程中，发现easyui目前还缺少一些小功能或是未开放出来 。拿datagrid插件来说，数据加载提供了两种方式远程和本地数据加载，但只有远程数据加载时才会显示数据加载的遮罩层，在数据加载完成后隐藏遮罩层；而本地数据加载时则不会出现遮罩，这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要 。

1、扩展datagrid的loading、loaded方法：

(function () {  
        $.extend($.fn.datagrid.methods, {  
            //显示遮罩  
            loading: function (jq, msg) {  
                return jq.each(function () {  
                    var panel = $(this).datagrid("getPanel");  
                    if (msg == undefined) {  
                        msg = "正在加载数据，请稍候...";  
                    }  
                    $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel);  
                    $("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 });  
                });  
            }  
    ,  
            //隐藏遮罩  
            loaded: function (jq) {  
                return jq.each(function () {  
                    var panel = $(this).datagrid("getPanel");  
                    panel.find("div.datagrid-mask-msg").remove();  
                    panel.find("div.datagrid-mask").remove();  
                });  
            }  
        });  
    })(jQuery);

使用方法：

_queryGrid.datagrid("loading","玩命加载。。。");
    _queryGrid.datagrid("loaded");

2、tab控件扩展loading和loaded方法：

(function () {  
        $.extend($.fn.tabs.methods, {  
            //显示遮罩  
            loading: function (jq, msg) {  
                return jq.each(function () {  
                    var panel = $(this).tabs("getSelected");  
                    if (msg == undefined) {  
                        msg = "正在加载数据，请稍候...";  
                    }  
                    $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel);  
                    $("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 });  
                });  
            }  
    ,  
            //隐藏遮罩  
            loaded: function (jq) {  
                return jq.each(function () {  
                    var panel = $(this).tabs("getSelected");  
                    panel.find("div.datagrid-mask-msg").remove();  
                    panel.find("div.datagrid-mask").remove();  
                });  
            }  
        });  
    })(jQuery);

**显示遮罩：$("\#tabID").tabs("loading",msg) msg--要显示的信息**

**隐藏遮罩：$("\#tabID").tabs("loaded")**

发表评论取消回复

表情：

评论列表（有 0 条评论，529人围观）

还没有评论，来说两句吧...

相关阅读

相关 datagrid排序 java_easyUI 添加排序到datagrid

@author YHC 这个示例展示如何排序datagrid通过点击列表头. ![1344568376\_2836.png][1344568376_2836.png] 在

亦凉/ 2022年11月10日 00:56/ 0 赞/ 198 阅读

相关 jQuery easyui datagrid 的数据加载

这篇文章只谈jQuery easyui datagrid 的数据加载，因为这也是大家谈论最多的内容。其实easyui datagrid加载数据只有两种方式：一种是ajax加载目

╰半夏微凉°/ 2022年08月24日 11:47/ 0 赞/ 244 阅读

相关 jquery easyui datagrid data format

概要 jQuery EasyUI是一个基于jquery的集成了各种用户界面的框架,使用easyui我们不需要写太多javascript代

Bertha 。/ 2022年08月24日 11:47/ 0 赞/ 231 阅读

相关 jquery-easyui中datagrid扩展，隐藏显示表头功能

今天，后台中需要新增一个功能，用户可以自由选择显示的列，之后保存到本地localStroage中。所以扩展了easyui中datagrid的onHeaderContextMen

川长思鸟来/ 2022年08月14日 04:51/ 0 赞/ 397 阅读

相关 jquery easyui datagrid 使用参考

原文地址：http://www.cnblogs.com/youring2/archive/2013/03/01/2938661.html [jquery easyui da

「爱情、让人受尽委屈。」/ 2022年08月11日 16:02/ 0 赞/ 237 阅读

相关 jquery easyui -datagrid(悬浮,隐藏)

document.getElementById(i).style.display ='block'; //获取当前页面里面id为i的标签，改变该标签的样式，使其满眶显示。

悠悠/ 2022年08月09日 09:46/ 0 赞/ 391 阅读

相关 jquery-EasyUI datagrid 换行

加上参数：nowrap: false,即可。如下代码： $("\userList").datagrid(\{ width: 'auto', hei

怼烎@/ 2022年07月12日 01:29/ 0 赞/ 361 阅读

相关扩展easyui.datagrid，添加数据loading遮罩效果代码

在使用的过程中，发现easyui目前还缺少一些小功能或是未开放出来拿datagrid插件来说，数据加载提供了两种方式远程和本地数据加载，但只有远程数据加载时才会显

刺骨的言语ヽ痛彻心扉/ 2022年04月06日 03:00/ 0 赞/ 358 阅读

相关 EasyUI（datagrid）: load()、reload()、loadData()方法含义及区别比较

1.load方法 $(“grid”).datagrid(“load”,{ });//后台快捷追加查询该方法是一个简便后台方式，可以带参数，参数为一个json对象，

落日映苍穹つ/ 2021年11月29日 18:30/ 0 赞/ 761 阅读

相关 jquery扩展easyui的datagrid组建，添加loading方法

easyui可以说是轻量级的前端UI框架，在使用的过程中，发现easyui目前还缺少一些小功能或是未开放出来。拿datagrid插件来说，数据加载提供了两种方式远程和本地数据

秒速五厘米/ 2021年06月24日 14:34/ 0 赞/ 530 阅读