反馈已提交

网络繁忙

隐藏行后隔行变色

  • 文档创建者:axing
  • 编辑次数:12次
  • 最近更新:RosieY 于 2021-01-26
  • 1. 概述

    1.1 问题描述

    如果我们对报表设置了隔行变色(隔行/列设置背景色),又设置了条件属性来隐藏行高,那么原本的隔行变色看起来会很混乱。

    例如,隔行变色在隐藏了「运货商」为 1 的行后效果如图:

    Snag_ec78646.png

    如何实现隐藏行后依旧保持隔行变色呢?

    1.2 解决思路

    方案一:在设置背景色时利用公式 IF(),如果隐藏行的条件成立,被隐藏行不执行隔行变色的条件,否则就执行。

    方案二:在「模板>模板 Web 属性>分页预览设置」中添加「加载结束」事件,利用 JavaScript 代码实现。

    2. 示例

    2.1 准备模板

    打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\隔行设置背景色.cpt

    2.2 隐藏行

    选中 E2 单元格,添加条件:当运货商等于 1 时,行高为 0。属性下拉选择「行高」,条件类型为「普通」,条件设置为「等于字符串 1」,完成后点击「增加」。步骤如下图所示:

    Snag_ecd4335.png

    2.3 方案一:设置背景色

    将 A2 单元格「条件属性>背景」设置中的公式修改为:IF(E2!=1,SEQ()%2=0,FALSE)

    Snag_ed3ab0a.png

    2.4 方案二:添加加载结束事件

    1)设置隐藏行后,将 A2 单元格原本的「条件属性」删掉。

    2)点击菜单栏「模板>模板 Web 属性>分页预览设置」,选择「为该模板单独设置」。在页面下方事件设置处,点击「添加」按钮,选择「加载结束」事件,在弹出的事件设置对话框中输入 JavaScript 代码如下:

    $(".x-table tr:visible").each(function(i) {
    if (i % 2 == 0 && i >= 1) {
    $(this).css("background-color", "#ccccfd");
    }
    });

    注:其中,i>=1 中的 1,是由开始变色的单元格所在行数减 1 得来的。

    步骤如下图所示:

    Snag_eedc143.png

    2.5 效果预览

    PC 端

    保存报表,点击「分页预览」,效果如下图所示:

    Snag_ed4bde1.png

    移动端

    方案二添加「加载结束」事件不支持移动端,方案一 App 端和 H5 端均支持,效果如下图所示:

    Snag_ed5b30f.png

    3. 决策报表JS示例

    相同效果想要在决策报表中使用 JS 事件实现,该怎么做呢?

    3.1 制作模板

    新建决策报表,在决策报表中拖入一个报表块,报表块中表格设计同上述模板一致。并在 E2 单元格添加相同的条件属性,A2 单元格不设置条件属性。

    Snag_f086f76.png

    3.2 添加初始化后事件

    选中报表块,在右侧面板中点击「事件」,添加「初始化后」事件,输入 JavaScript 代码如下:

    setTimeout(function() {
    $(".x-table tr:visible").each(function(i) {
    if (i % 2 == 0 && i >= 1) {
    $(this).css("background-color", "ccccfd");
    }
    });
    }, 1000);

    步骤如下图所示:

    1610941940610251.png

    3.3 效果预览

    保存报表,点击「PC端预览」,效果如下图所示:

    1610941995467787.png

    注:不支持移动端。

    4. 模板下载

    已完成模板可参见:

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\隐藏行后隔行设置背景色.cpt

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\隐藏行后隔行设置背景色-JS.cpt

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\隐藏行后隔行设置背景色-JS.frm

    点击下载模板:

    隐藏行后隔行设置背景色.cpt

    隐藏行后隔行设置背景色-JS.cpt

    隐藏行后隔行设置背景色-JS.frm

    附件列表


    主题: 报表专题
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭