【仅供内部供应商使用,不提供对外解答和培训】

Page tree

【仅供内部供应商使用,不提供对外解答和培训】

Skip to end of metadata
Go to start of metadata

接口作用

提供自定义的报表加载动画。 

接口内容

FR. HtmlLoader
$.extend(FR, {
  HtmlLoader : function(){
 	return {
 		loadingEffect : function(cfg) {}
 	}
  }()
});
默认实现
 $.extend(FR, {
    HtmlLoader: function () {
        return {
            loadingEffect: function (cfg) {
                var el = cfg.el;
                var config = $.extend({
                    show: false,
                    overflow: false
                }, cfg || {});
                var $indicator = el.data('indicator');
                if (!$indicator) {
                    $indicator = $("<div class='load-indicator'></div>");
                    $("<div class='loading-ec-indicator'></div>").appendTo($indicator);
                    $("<div class ='text-indicator' style='font-size:11pt'>" + FR.i18nText("FR-Basic_Loading") + "</div>").appendTo($indicator);
                    var o = {
                        position: 'fixed',
                        margin: 'auto',
                        left: '0px',
                        right: '0px',
                        top: '0px',
                        bottom: '0px',
                        height: '64px',
                        width: '64px'
                    };
                    $indicator.css(o);
                    el.data('indicator', $indicator);
                }

                if (!config.show) {
                    $indicator.detach();
                    //加载完再auto
                    el.css('overflow', 'auto');
                    el.css('overflow', config.overflow || 'auto');
                } else if (config.show && !$indicator.is(':visible')) {
                    el.append($indicator);
                    //如果加载动画的高度宽度小于当前报表块的展示区域, 会出现滚动条, 所以要hidden
                    el.css('overflow', 'hidden');
                }
            }
        }
    }()
});


接口接入

需要使用JavaScriptFileHandler接口,引入自定义的JavaScript文件,然后在xml中注册Handler的实现类。

<extra-core>
    <JavaScriptFileHandler class="com.fr.plugin.loading.GradientFileLoader"/>
</extra-core>


示例效果

接口示例

示例源码:https://code.fanruan.com/fanruan/demo-page-loading

注意事项

同一时间,仅能有一个实现了该接口的插件生效。

  • No labels