报表添加锚点实现跳转到指定行

  • 文档创建者:axing
  • 编辑次数:5次
  • 最近更新:Carly 于 2020-03-10
  • 1. 概述

    1.1 预期效果

    有时候报表数据量大、不分页显示,查看靠后的数据非常麻烦。希望能通过指定的数字快速定位到对应的行数,如下图所示:

    1582515024672217.gif

    1.2 实现思路

    通过使用 HTML 的锚点链接,实现定位到对应 ID 的元素。

    2. 示例

    2.1 新建报表

    2.1.1 新建数据集

    新建普通报表,创建数据查询 ds1,SQL 语句为:SELECT * FROM 人员花名册 limit 200。如下图所示:

    1582513334480412.png

    2.1.2 设计报表

    将数据集中相应的字段放到对应的单元格,报表样式如下图所示:

    1582514509358893.png

    2.2 设置序号单元格属性

    1)选中 A3 单元格,点击单元格元素,插入公式:=seq( )。如下图所示:

    1582513584870106.png

    2)选中 A3 单元格,点击单元格属性>形态,设置为公式形态="<span id='"+$$$+"'>"+$$$+"</span>"。如下图所示:

    1582513747250814.png

    3)选中 A3 单元格,点击单元格属性>其他>高级,选择用HTML显示内容。如下图所示:

    1582513922798764.png

    2.3 设置下拉框控件

    选中 B1 单元格,点击控件,设置为下拉框控件。如下图所示:

    1583819307550950.png

    2.3.1 设置控件属性

    数据字典类型设置为公式,实际值=range(200)。如下图所示:

    1582514342834650.png

    2.3.2 设置控件事件

    选中 B1 单元格,点击控件>事件,添加编辑后事件,输入 JavaScript 代码,如下图所示:

    1582515221652221.png

    JavaScript 代码如下:

    location.href = "#"+this.value;

    2.4 效果预览

    保存模板,选择填报预览,效果如1.1 预期效果所示。

    注:不支持移动端。

    3. 已完成模板

    已完成模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\点击跳转到指定行.cpt

    点击下载模板:点击跳转到指定行.cpt

    附件列表


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