FVS实现控件动态展示对应数据- FineReport帮助文档 - 全面的报表使用教程和学习资料

文档创建者：Tracy.Wang

历史版本：6

最近更新：Tracy.Wang 于 2024-08-21

1. 概述

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 应用场景

在 FVS 模板上展示控件联动效果时，该联动效果是通过用户的选择来实现的，用户如果希望在选择一个控件的值之后，其余的控件可以自动显示对应的数据部分，这个该如何实现呢？同时，用户希望在第一次打开模板时，后续联动的控件不显示，效果如下图所示：

1.2 实现思路

联动控件的默认值用 SQL 语句实现对应数据的展示。当第一次打开模板时，标签不显示可以通过隐藏组件实现。

2. 示例

2.1 新建模板

1）在 FineReport 设计器左上角点击「文件>新建可视化看板」。

2）在「创建空白看板」Tab 中，可自定义模板名称和尺寸，选择模板样式为「内置样式>深色主题一」。

3）点击「创建看板」。

新建fvs看板.png

2.2 准备数据

新建数据集 ds1 ，SQL语句为SELECT * FROM 订单 where 客户ID ='${ID}'。

2.3 添加选择控件

1）点击组件区「控件>下拉框」向画布中添加下拉框控件，并调整到适当的位置，设置「下拉框控件」的绑定参数为 ID 。

选项值来源设置为数据库表，选择数据库 FRDemo 的「客户」表，实际值为「客户ID」，显示值为「公司名称」。如下图所示：

2）点击组件区「文字>标题」向画布中添加标题组件，调整到适当的位置，标题内容设置为客户名称。如下图所示：

3）点击「控件>查询按钮」向画布中添加查询按钮，调整到适当的位置。如下图所示：

2.4 添加联动控件

1）点击组件区「控件>文本框」向画布中添加四个文本框控件，并调整组件位置。默认值设置为联系人姓名：、联系人职务：、公司地址：、电话号码：。

以联系人姓名文本框控件为例，如下图所示：

2）点击组件区「控件>文本框」，在联系人姓名文本框控件后再添加一个文本框控件，为了美观，在右侧「组件>组件样式」中将边框背景和边框线设置为无。

默认值选择公式，公式为：sql("FRDemo", "select 联系人姓名 from 客户 where 客户ID='" + $id +"'", 1, 1)

上述 sql 意为在 FRDemo 连接中执行 sql 语句，显示第一列第一行的查询结果，根据要求不同，此处亦可去除最后一个 1 ，显示查询到的一列，参数面板中表现为以逗号分隔的行形式，如下图所示：

同理，分别在联系人职务、地址、电话号码等控件后增加文本控件，设置组件样式，默认值为公式，对应的公式分别如下：

sql("FRDemo","select 联系人职务 from 客户 where 客户ID='" + $id + "'",1,1)
sql("FRDemo","select 城市||地址 from 客户 where 客户ID='"+$id+"'",1,1)
sql("FRDemo","select 电话 from 客户 where 客户ID='"+$id+"'",1,1)

2.5 添加表格组件

1）添加一个表格组件，点击「编辑组件」进入表格编辑界面。如下图所示：

2）将数据集中的字段拖入单元格，设置对应标题。表格样式如下图所示：

3）双击 A2 单元格处设置模板参数的过滤，可选列为客户 ID，操作符为等于，参数为$id , 如下图所示：

2.6 控件设置不可见

1）同时选中联动控件中相对应的文本框控件，点击画布上方「组合」按钮，选择组合即可将这些组件合并成组，组合名称分别设置为姓名、职务、地址、电话。

以联系人姓名控件和其对应的文本框控件为例，如下图所示：

2）将这些组合设置为不可见，即初始化时隐藏。如下图所示：

3）在编辑下拉框之后，联动控件又需要显示出来，可以在下拉框控件处添加一个编辑结束事件，如下图所示：

JS 代码如下：

var a=duchamp.getWidgetByName("姓名");
a.setVisible(true);
var b=duchamp.getWidgetByName("职务");
b.setVisible(true);
var c=duchamp.getWidgetByName("地址");
c.setVisible(true);
var d=duchamp.getWidgetByName("电话");
d.setVisible(true);
//当下拉框选择“不选”的时候，联动控件全部隐藏
var value = duchamp.getWidgetByName("ID").getValue();
if (value == "") {
   a.setVisible(false);
   b.setVisible(false);
   c.setVisible(false);
   d.setVisible(false);
}