查询结果为空时不显示报表内容

  • 文档创建者:axing
  • 编辑次数:5次
  • 最近更新:用户z1931049 于 2021-01-14
  • 1. 概述

    1.1 问题描述

    在查询报表的时候,即使没有查询结果,也会把表头和表尾等信息显示出来。如下图所示:

    Snag_29c3f403.png

    但是我们希望查询结果为空时下面的报表区域什么都不显示,就像从来没有执行过查询一样。而能查询出结果的,就正常显示报表。该如何实现呢?

    1.2 解决思路

    选择某一个查询结果所在的单元格,如 1.1 中所述,查询结果是「地区」,显示地区的单元格为 A2 ,判断该单元格是否为空,为空则隐藏整个报表区域。

    隐藏报表区域可通过条件属性设置行高为 0 实现,也可通过添加加载结束事件写 JavaScript 脚本实现。

    2. 示例

    2.1 准备数据

    新建普通报表,新建数据库查询 ds1,SQL 查询语句为:SELECT * FROM 销量 WHERE 地区='${地区}' ,如下图所示:

    Snag_29cbb492.png

    2.2 表格设计

    A1~C1 单元格输入标题,A2~C2 单元格插入对应数据列,设置 A2、B2 数据设置为「分组」,扩展方向为「纵向扩展」,C2 数据设置为「汇总」,C3 单元格插入公式 SUM(C2)。表格样式如下图所示:

    Snag_29d41efd.png

    2.3 参数设置

    将参数「地区」添加至参数面板,设置控件类型为「文本控件」,控件值为空,如下图所示:

    Snag_29d9f447.png

    保存报表,点击「分页预览」,不输入地区或输入的地区不存在时,即查询结果为空时,效果如下图所示:

    Snag_29dc3175.png

    2.4 方案一:设置条件属性

    给每一行的第一个单元格都添加一个条件属性,设置行高为 0 ,公式条件为「公式类型」,公式为 len(A2)=0

    当条件属性一样时,可同时选中 A1、A2、A3 单元格添加,步骤如下图所示:

    Snag_29e619d6.png

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

    选择「模板>模板 Web 属性>分页预览设置」(其他预览模式下同理设置),选择「为该模板单独设置」,在下方事件设置处添加「加载结束」事件,输入 JavaScript 代码。

    JavaScript 代码如下:

    if ($("[id^=A2]").text().length == 0) {
    $(".x-table").css("display", "none");
    }

    步骤如下图所示:

    Snag_29f09128.png

    2.6 效果预览

    PC 端

    保存报表,点击「分页预览」,上述两种方案效果相同,如下图所示:

    7E9E51EB-9F28-428E-A2D8-B0E4CFAB98B7.GIF

    移动端

    添加加载结束事件的方案不支持移动端,设置条件属性的方案支持 App 端和 H5 端,效果如下图所示:

    1E9C0A18-C0AA-4D64-8CCA-8385DFAD11D8.GIF

    3. 模板下载

    已完成模板可参见:

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\查询结果为空时不显示报表内容.cpt

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\查询结果为空时不显示报表内容-JS.cpt

    点击下载模板:

    查询结果为空时不显示报表内容.cpt

    查询结果为空时不显示报表内容-JS.cpt

    附件列表


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