最新历史版本 :FVS下拉框控件 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

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

1.1 版本

报表服务器版本插件版本功能变动
11.0.6V1.xV1.x 版本文档请参考:FVS下拉框控件历史版本
11.0.16V2.0.1
控件新增内容样式设置,详情请参见 2.1.2 节
11.0.22V2.2.1移动端支持选择下拉样式,详情参见 2.1.2 节

1.2 功能简介

下拉框控件在模板预览时,可下拉选择选项,通过参数联动其他组件。效果如下图所示:

BA69B8E9-68EF-4AE7-BA8C-73A2BD2D1549.GIF

组件动画请参见:FVS组件动画 。

组件样式请参见:FVS组件样式属性 。控件名称在「内容」中设置。

2. 功能介绍编辑

2.1 控件内容

2.1.1 内容

下拉框控件可设置的内容如下图所示:

Snag_4eb630da.png

各设置项的详细介绍如下表所示:

设置项
详细介绍
名称控件名称即参数名称,默认生成中文名称,需根据实际参数进行修改
数据字典绑定控件的待选择项,必须设置,否则控件不显示选项,如何设置可参考:数据字典

去除重复项,勾选后,会将下拉选项中相同的项合并;不勾选,不会合并仍保留重复的选项。默认勾选
默认值

可设置下拉框控件显示的默认值,有如下 3 种

1)自定义字符串:可直接输入文本

Snag_2aab4f8d.png

2)字段:可选择数据集中字段,若返回值为数组,只取数组序列中第一个值显示

Snag_29f3bd79.png

3)公式:点击右侧 fx 输入公式,若返回值为数组,只取数组序列中第一个值显示

Snag_24a6d5cc.png

水印预览时控件内显示的浅灰色水印文字,以提示用户需要输入的信息,选择选项或输入文本后消失,默认为空
权限设置页面初始预览时该控件是否可编辑,默认勾选可编辑
校验空值校验:是否允许控件为空值,勾选后,允许控件为空值;不勾选,可设置校验提示文字,模板预览时若控件为空,则显示提示文字。默认勾选

自定义值校验:是否允许用户输入不包含在下拉菜单选项中的值

  • 勾选后,允许输入不包含在下拉选项中的值,并将其添加到下拉选项中,但刷新后不会保存

  • 不勾选,不允许输入不包含在下拉选项中的值,当输入值不包含在下拉选项中时,下拉框不会自动清除输入值,并会弹出提示框:不允许自定义值

2.1.2 内容样式

字符样式:支持对控件中显示的字符进行样式设置,例如字体、字号、颜色等

icon 大小及颜色也同样受到影响,如下图所示:

1697698772204341.png

注1:对下拉选项中的字体无效,下拉选项字符样式仅受 FVS模板主题 影响。

注2:修改字符颜色后,再设置 FVS模板主题 ,字符颜色会跟随主题变化,需重新设置。

V2.2.1 及之后版本,移动端 可选择下拉样式模板:

Snag_4ebbbeba.png

效果如下图所示:

Snag_4ebf4020.png

2.2 控件交互事件

点击「交互>添加事件」,可添加 JavaScript 事件实现更多效果。下拉框控件支持「初始化后事件」和「编辑结束事件」。如下图所示:

Snag_2abf1707.png

点击具体的某一个事件,会弹出 JavaScript 事件设置框。如下图所示:

注:关于 FVS 支持的 JavaScript 可参考文档 FVS支持的JS接口场景 。

Snag_24bd0a6e.png

3. 示例编辑

3.1 准备模板

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

1696926492272814.png

2)新建数据库查询 ds1 ,输入 SQL 查询语句 SELECT * FROM 销量 where 地区='${area}' ,并给参数 area 设置默认值为「华东」,即默认获取华东地区的销量数据。

如下图所示:

2022-06-23_21-20-45.png

3.2 添加下拉框控件

1)点击组件区「控件>下拉框」,添加到页面中。

在右侧配置面板「内容」中将名称修改为「area」,默认值输入「华东」,即可与数据集中定义的 area 参数匹配。如下图所示:

1665305982525999.png

2)绑定下拉框控件数据字典,选择类型为「数据库表」,选择 FRDemo 中销量表的「地区」字段。如下图所示:

1684482410561777.png

3.3 添加柱形图

点击组件区「图表>柱形图」,将柱形图组件添加到页面,给柱形图绑定含有 area 参数的数据集中数据。如下图所示:

Snag_2ada5797.png

3.4 效果预览

3.4.1 PC 端

点击右上角「保存」,点击「预览」,下拉选择不同选项,柱形图则显示为不同地区的销售员销量。如 1.2 节效果所示。

3.4.2 移动端

预览方式请参考 FVS移动端预览 ,效果如下图所示:

4. 模板下载编辑

点击下载模板:FVS下拉框控件示例.fvs