反馈已提交

网络繁忙

FVS下拉框控件

  • 文档创建者:Alicehyy
  • 历史版本:15
  • 最近更新:Tracy.Wang 于 2024-09-18
  • 1. 概述

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

    1.1 版本

    报表服务器版本插件版本功能变动
    11.0.6V1.xV1.x 版本请参见文档:FVS下拉复选框控件历史版本
    11.0.16V2.0.0旧版本预览时,默认有全选选项。新增设置项,可自行设置是否显示全选按钮
    11.0.16V2.0.1控件新增内容样式设置,详情请参见 2.1.2 节
    11.0.22V2.2.1移动端支持选择下拉样式,详情参见 2.1.2 节
    11.0.22V2.8.0控件名称与参数分离,新增绑定参数逻辑,详情参见 2.1.1 节
    11.0.22V2.10.0下拉框控件和下拉复选框控件合并为下拉框控件,移至控件>列表中

    1.2 功能简介

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

    946107CE-861A-4111-8D9E-2B1FB320D9D9.GIF

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

    组件样式请参见:FVS组件样式属性 。

    2. 功能介绍

    2.1 控件内容

    2.1.1 内容

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

    911-1418.png

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

    设置项
    详细介绍
    绑定参数

    值为参数名称,用于与参数绑定。默认为空,需根据实际参数进行设

    支持已有参数的绑定,也可以直接输入新值以创建新的参数

    选项值来源绑定控件的待选择项,必须设置,否则控件不显示选项,如何设置可参考:数据字典

    去除重复项,勾选后,会将下拉选项中相同的项合并;不勾选,不会合并仍保留重复的选项。默认勾选
    选项
    开启多选,勾选后,下拉框支持多选;不勾选,下拉框仅支持单选。默认不勾选
    支持全选,仅在勾选「开启多选」后出现,且默认勾选。勾选后可通过选项中的「全选」按钮实现一键全选。
    返回值数组:返回值类型是数组型,例如:勾选三个值,返回值为:["值1","值2","值3"]

    字符串:返回值类型为字符串,需要定义分隔符、开始符和结束符,即将勾选的多个值根据分隔符拼接成一个字符串

    符号支持手动输入,或直接选择

    例如:分隔符定义为逗号,起始符和结束符均定义为单引号,返回值为 '值1,值2,值3'

    Snag_495f44d8.png
    默认值

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

    1)自定义字符串:可直接输入文本,输入多个值时,可实现多选。但输入多个值时,格式需与控件「返回值」类型一致,返回值不做修改时默认用英文逗号隔开,如:华东,华北

    Snag_2eb9a17d.png

    2)字段:可选择数据集中字段,若字段有多个值,则会多选

    Snag_29f3bd79.png

    3)公式:点击右侧 fx 输入公式,若公式对应的值为多个值,则会多选

    Snag_24a6d5cc.png

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

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

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

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

    2.1.2 内容样式

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

    控件图标的大小同样受到影响,如下图所示:

    620-1715.png

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

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

    注3:控件图标的颜色可以在模板主题样式中设置。

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

    Snag_4ec5ea3e.png

    效果如下图所示:

    Snag_4ec51faa.png

    2.2 控件交互事件

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

    911-1426.png

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

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

    911-1427.png

    3. 示例

    3.1 准备模板

    1)点击设计器左上角「文件>新建可视化看板」,可自定义模板名称和尺寸。

    909-1703.png

    2)新建数据库查询 ds1 ,输入 SQL 查询语句 SELECT * FROM 销量 where 销售员 in ('${spe}') ,并给参数 spe 设置默认值为「孙林」,即默认取出孙林的销量数据。

    如下图所示:

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

    3.2 添加下拉框控件

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

    在右侧配置面板「内容」中将绑定参数设置为「spe」,即可与数据集中定义的 spe 参数匹配。

    如下图所示:

    911-1430.png

    2)绑定下拉框控件的选项值来源,选择类型为「数据库表」,选择 FRDemo 中销量表的「销售员」字段。

    如下图所示:

    911-1433.png

    3)若想在下拉框中实现多选,需勾选「开启多选」、设置「返回值」。

    为了匹配 SQL 中的 in 语句,这里设置控件返回值为「字符串」,手动输入分隔符为 ',' 。设置默认值为「孙林」。

    注:若默认值要设置多个选项,需与返回值类型格式保持一致,例如本例默认值可设置为「孙林','金士鹏」。

    如下图所示:

    911-1437.png

    3.3 添加折线图

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

    911-1439.png

    3.4 效果预览

    3.4.1 PC 端

    点击右上角「保存」,点击「预览」,下拉选择不同选项,折线图显示对应销售员的产品销量。

    若不勾选「开启多选」,效果如下图所示:

    911-1443.gif

    若勾选「开启多选」,效果如下图所示:

    911-1442.gif

    3.4.2 移动端

    预览方式请参考 FVS移动端预览 

    不勾选「开启多选」的效果如下图所示:

    911-1455.gif

    勾选「开启多选」的效果如下图所示:

    911-1456.gif


    4. 模板下载

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

    附件列表


    主题: FineVis数据可视化
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持