隐藏行后隔行显示不同背景色

  • 文档创建者:axing
  • 编辑次数:8次
  • 最近更新:Kevin-s 于 2019-06-20
  • 1. 描述

    如果我们对报表设置了隔行变色,又设置了条件属性来隐藏行高,会使原本的隔行变色看起来很混乱。如下,隐藏了销量小于 400 的行后:

    222


    2. 思路

    当隐藏行的条件成立时,不执行隔行变色的条件,否则就执行。或者利用js实现。


    3. 操作步骤

    3.1 利用条件属性

    上图的设计如下:

    222

    E2 单元格的条件属性隐藏了销量小于 400 的行,如图所示:

    222

    在 A2 单元格处设置条件属性-背景,条件为IF(E2>=400,SEQ()%2==0,FALSE)

    222
    保存预览即可。


    3.2 利用 JS 实现

    1)普通报表

    点击模板>模板 Web 属性>分页预览设置,添加加载结束事件,JS 代码如下:

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

    注:其中,i>=1 中的 1,指的是设置变色的单元格所在行数 -1。


    222

    2)决策报表

    点击报表块,在右侧面板中点击事件,添加初始化后事件,JS 代码如下:

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

    222

    4. 效果预览

    4.1 PC 端效果

    1)普通报表

    222

    2)决策报表
    222


    4.2 移动端效果

    222

    注:H5 与 App 均可实现,效果相同。


    附件列表


    主题: 报表设计
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!