反馈已提交

网络繁忙

树控件构建方式

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

    FVS 插件 V1.17.1 版本新增 下拉树控件 与 视图树控件 ,两者的定义方法一致,区别主要在于浏览器端预览时显示的效果不同。如下图所示:

    Snag_3939fe8f.png

    本文主要讲解树控件构建树的三种方式的区别及应用,应用示例主要以下拉树控件为例,视图树同理设置即可。

    2. 构建方式对比

    1)自动构建

    根据树数据集层级关系自动构建出下拉树,无需一层一层定义数据。

    Snag_39993773.png

    2)普通分层构建

    通过「选项值来源」一层一层定义下拉树,需要数据集中定义一些 layer 参数配合完成,将上一层的值作为参数值,过滤下一层的数据。

    普通分层构建方式提供有「性能优先」选项,勾选后会提高加载效率,默认不勾选。

    Snag_399d27df.png

    勾选后,当有层目录下没有子节点,显示的时候仍会是 + ,点开无数据项。如下图所示:

    Snag_399862ce.png

    3)极速分层构建:

    通过「数据集 」来定义下拉树的层级,相比「普通分层构建」,不需要 layer 参数配合,而是将数据按分类排列,每一层绑定数据列并设置依赖关系即可。

    Snag_399ce47d.png

    4)详细对比如下表所示:


    自动构建普通分层构建极速分层构建
    需要的数据集个数
    一个多个一个或多个
    需要的数据集类型树数据集普通数据集普通数据集
    需要的数据结构

    有对应关系的一列或两列字段,树关系完整,支持存在多个根节点

    有对应关系的多列字段,sql中需要用 treelayer 函数进行过滤

    有对应关系的多列字段,必须设置依赖关系
    性能因数据结构特殊,所以和其他两种构建方式无对比性
    大数据量或者层级过多时性能一般常规情况下性能优于普通分层构建
    其他无法自动过滤空节点支持不显示空节点无法自动过滤空节点

    3. 自动构建示例

    将普通数据集转为 树数据集 后,下拉树控件可直接选择树数据集来自动构建树层级,树数据集必须要有明显的父子关系。如下图所示:

    1656506289Cjae.png

    构建树时,要注意数据不能存在环,否则构建树不成功,日志报错:树控件构建失败,原始标记字段数据间构成循环

    3.1 准备数据

    准备可以构建树数据集的表,例如本例使用的内置数据库 FRDemo 中的公司部门表。

    注:可以构建树数据集的表要求请参见 树数据集的完整性检查 。

    新建 FVS 可视化看板,增加数据集 ds1,SQL 语句为:SELECT * FROM 公司部门。表结构如下图所示:

    Snag_38941aaa.png

    表分析:

    • 第一行表示总部的标记是 1,父标记为空,表示它是根部门,没有父部门,通常如果一个部门没有父部门,那么父部门标记为空。

    • 第二行的意思是「人力资源部」的原始标记为 11,其父部门是标记为 1 的部门(然后可以根据这个标记来查询它的父部门是总部)。

    遍历这个数据集后,能得到所有的部门信息,职位信息;根据「上级 ID」,到「部门 ID」这一列去查找相应的部门名称,从而可以构建父部门。

    需要注意的是:「上级 ID」中出现的标记(除了是空),都必须在「部门ID」中找到对应的标记,可以看到上图中所有的「上级 ID」都能在「部门 ID」中找到对应的值。

    3.2 转为树数据集

    新建树数据集 Tree,使用 ds1 来构建树,如下图所示:

    Snag_38a0c4f9.png

    3.3 设计下拉树控件

    621-1151.gif

    3.4 效果预览

    点击「预览」,效果如下图所示:

    844D853B-5E5D-4192-9D1A-F0E9DF402B31.GIF

    4. 普通分层构建示例

    普通分层构建需在选项值来源定义界面给每一个层级分别绑定不同的数据集。其实就是 FR 中的动态 SQL,需要将每个 SQL 定义为一个报表数据集。

    在普通分层构建中层次定义如下:

    • 层次 1:通过「选项值来源」来定义下拉框的实际值与显示值。

    • 层次 2:根据层次 1 的数据进行过滤,需要定义成数据集,然后通过数据查询返回数据集定义的列。数据集定义成:SELECT 字段 FROM 表名 WHERE 层次 1 的字段 = '${layer1}'

    注1:layer1 表示取层次 1 节点的值,若在层次 3 中调用,则是 SELECT 字段 FROM 表名 WHERE 层次 2 的字段 = '${layer2}' 依次类推,其中 layer1,layer2 等均是系统参数,均为固定写法,不可更改。

    注2:layer 系列参数只可用于树构建,不支持用于参数过滤。

    4.1 准备数据

    新建 FVS 可视化看板,新建 3 个数据集,SQL 语句分别如下:

    ds1:SELECT 货主地区 FROM 订单 where 货主地区!='',查询出所有地区。

    ds2:SELECT  货主省份 FROM 订单 where 货主省份!='' and 货主地区='${layer1}',根据第一层 layer1 的值查询出货主省份

    ds3:SELECT  货主城市 FROM 订单 where 货主城市!='' and 货主地区 = '${layer1}'and 货主省份='${layer2}'根据前两层 layer1、layer2 的值查询出货主城市。

    4.2 设计下拉树控件

    1)向画布中添加下拉树控件,打开「选项值来源」设置框,选择构建方式为「普通分层构建」,点击加号添加层次。如下图所示:

    621-1347.gif

    2)层次1、层次2、层次3 分别对应数据查询 ds1 、ds2 、ds3 的字段,需选中层次后分别设置。如下图所示:

    621-1351.gif

    4.3 效果预览

    点击「预览」,效果如下图所示:

    3AE08EFE-3D05-4BA5-B212-C68A8077CE46.GIF

    5. 极速分层构建

    5.1 准备数据

    新建 FVS 可视化看板,新建数据集,SQL 语句为:SELECT 货主地区,货主省份,货主城市 FROM S订单 where 货主城市!='' 。表结构如下图所示:

    Snag_39b5da04.png

    5.2 设计下拉树控件

    1)向画布中添加下拉树控件,打开「选项值来源」设置框,构建方式默认为「极速分层构建」,点击加号添加层次。如下图所示:

    621-1405.gif

    2)选择每层对应的值,并且设置相应的依赖层次和依赖字段,操作方式如下:

    • 层次1:

    Snag_39bbcdc2.png

    • 层次2:

    Snag_39bc6be7.png

    • 层次3:

    Snag_39bc73e6.png

    5.3 效果预览

    点击「预览」,效果如下图所示:

    1C8C3801-3FDB-43F7-B9CB-19C6013F7752.GIF

    6. 模板下载

    附件列表


    主题: FineVis数据可视化
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭



    AI

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