扩展easyui面板panel,当前面板的局部加载进度：遮罩和提示

最新推荐文章于 2022-06-16 08:44:04 发布

原创最新推荐文章于 2022-06-16 08:44:04 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #前端控件扩展

本文介绍如何扩展EasyUI面板，实现按需遮罩功能，提供加载时的提示信息，并演示了'loading'和'loadend'方法的使用，适用于统计、生成和加载场景。

这次扩展，是为了解决需要只遮罩某个面板的需求。

扩展代码如下：
/*
 扩展easyui面板panel,当前面板的局部加载进度：遮罩和提示
 使用案例：
 _this.view.panel("loading","正在统计中，请稍候……");//参数1：方法名，参数2：加载显示的文字
 _this.view.panel("loadend");//参数：方法名
 */
$.extend($.fn.panel.methods, {
    loading: function (jq, loadMsg) {
        if (loadMsg) {
            var panel = jq.panel("panel");
            if (!panel.children("div.datagrid-mask").length) {
                $("<div class=\"datagrid-mask\" style=\"display:block\"></div>").appendTo(panel);
                var msg = $("<div class=\"datagrid-mask-msg\" style=\"display:block;left:50%\"></div>").html(loadMsg).appendTo(panel);
                msg._outerHeight(40);
                msg.css({marginLeft: (-msg.outerWidth() / 2), lineHeight: (msg.height() + "px")});
            }
        }
    },
    loadend: function (jq) {
        var panel = jq.panel("panel");
        panel.children("div.datagrid-mask-msg").remove();
        panel.children("div.datagrid-mask").remove();
    }
});

使用方式：

var thisView=弹窗、面板、树等等。

thisView.panel("loading", "正在生成中，请稍候……");

当生成、加载、统计完成后

thisView.panel("loadend");