FineReport开源报表系统-JS实现切换Tab块时进行数据联动

1. 概述

 1.1 预期效果

在决策报表中，希望 Tab 块轮播切换时，可实现与报表块的数据联动。如下图所示：

1.2 实现思路

通过 JS 获取每个 Tab 块的轮播标题，转换为参数值，再通过控件进行界面传参，实现联动效果。

2. 示例

 2.1 准备数据

点击设计器左上角「文件>新建决策报表」，新建数据库查询 ds1，输出 SQL 查询语句：SELECT * FROM 地图 。

2.2 设计模板

2.2.1 设置绝对布局

点击设计器顶部菜单栏「模板>PC端自适应属性」，设置报表布局方式为「绝对布局」，报表缩放设置为「双向自适应」。如下图所示：

2.2.2 设计 Tab 块

1）向决策报表 body 中拖入一个，并调整其大小和位置。如下图所示：

2）双击 Tab 块，点击 Tab 块右上角添加按钮，再添加两个 Tab 页。接着向每个 Tab 页中拖入一个地图图表。如下图所示：