JS实现报表在数据分析模式下居中显示

  • 文档创建者:yiyemeiying
  • 编辑次数:11次
  • 最近更新:Leo.Tsai 于 2020-06-23
  • 1. 概述

    1.1 问题描述

    分页预览和填报预览均有报表显示位置设置项。而数据分析模式预览,没有报表居中显示功能,默认都是靠左显示的。

    而当想以数据分析模式预览时,报表居中显示,可采用以下方法。如下图所示:

    分页预览设置:

    image.png

    填报预览设置:

    image.png

    数据分析设置:

    image.png

    注:数据分析没有报表显示位置选项。

    1.2 实现思路

    在数据分析模式,通过给报表添加加载结束 JS 事件,来实现报表居中。

    2. 示例

    2.1 添加事件

    打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\OrderReport\Order_5.cpt

    点击模板>模板 Web 属性>数据分析设置,选择为该模板单独设置,在事件设置中添加一个加载结束事件,如下图所示
    image.png

    JavaScript 代码如下:

    ms = $('.html-content').length;//判断是否为多sheet
    if (ms != 0){
    //多sheet
    ff=$(".frozen-table",$('.html-content:visible')).length//判断当前sheet是否有冻结
    if (ff == 0) {
    //未冻结
    var slmargin = ($(".content-container").width()-$(".sheet-container div:first-child",$('.html-content:visible')).width())/2;
    if (slmargin > 0) {
    $('.sheet-container',$('.html-content:visible')).css('margin-left',slmargin); 
    //$(".x-table",$('.html-content:visible')).css('left',slmargin);
    $(window).resize();
    }
    }
    else {
    //冻结
    var slmargin=($(".content-container").width()-$('.x-table',$('#frozen-center'),$('.html-content:visible')).width()-$('.x-table',$('#frozen-west'),$('.html-content:visible')).width())/2;
    if (slmargin > 0) {
    $('.sheet-container',$('.html-content:visible')).css('margin-left',slmargin);
    $(window).resize();
    }
    }
    }
    else {
    ff=$(".frozen-table").length//判断当前sheet是否有冻结
    //单sheet
    if (ff == 0) {
    //未冻结
    slmargin = ($(".content-container").width() - $(".sheet-container div:first-child").width()) /2;
    if (slmargin > 0) {
    $('.sheet-container').css('margin-left',slmargin); 
    //$(".x-table").css('left',slmargin);
    $(window).resize();
    }
    }
    else {
    //冻结
    slmargin=($(".content-container").width()-$('.x-table',$('#frozen-center')).width()-$('.x-table',$('#frozen-west')).width())/2;
    if (slmargin > 0) {
    $('.sheet-container').css('margin-left',slmargin); 
    $(window).resize();}
    }
    }

    2.2 效果预览

    保存模板,点击数据分析预览,PC 端效果如下所示:

    image.png

    注:移动端不支持数据分析预览。

    3. 模板下载

    已完成的模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\数据分析JS实例\01-JS实现报表在数据分析模式下居中显示.cpt

    点击下载模板:01-JS实现报表在数据分析模式下居中显示.cpt

    4. 注意事项

    对于老版本的 JAR 包,上述 JavaScript 代码并不适用,需要修改下代码:

    ms = $('.html-content').length;//判断是否为多sheet
    if (ms != 0){
    //多sheet
    ff=$(".frozen-table",$('.html-content:visible')).length//判断当前sheet是否有冻结
    if (ff == 0) {
    //未冻结
    var slmargin = ($(".content-container").width()-$(".sheet-container div:first-child",$('.html-content:visible')).width())/2;
    if (slmargin > 0) {
    $('.sheet-container',$('.html-content:visible')).css('margin-left',slmargin); 
    $(".x-table",$('.html-content:visible')).css('left',slmargin);
    $(window).resize();
    }
    }
    else {
    //冻结
    var slmargin=($(".content-container").width()-$('.x-table',$('#frozen-center'),$('.html-content:visible')).width()-$('.x-table',$('#frozen-west'),$('.html-content:visible')).width())/2;
    if (slmargin > 0) {
    $('.sheet-container',$('.html-content:visible')).css('margin-left',slmargin);
    $(window).resize();
    }
    }
    }
    else {
    ff=$(".frozen-table").length//判断当前sheet是否有冻结
    //单sheet
    if (ff == 0) {
    //未冻结
    slmargin = ($(".content-container").width() - $(".sheet-container div:first-child").width()) /2;
    if (slmargin > 0) {
    $('.sheet-container').css('margin-left',slmargin); 
    $(".x-table").css('left',slmargin);
    $(window).resize();
    }
    }
    else {
    //冻结
    slmargin=($(".content-container").width()-$('.x-table',$('#frozen-center')).width()-$('.x-table',$('#frozen-west')).width())/2;
    if (slmargin > 0) {
    $('.sheet-container').css('margin-left',slmargin); 
    $(window).resize();}
    }
    }

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!