FVS实现动态折叠树

1.1 版本

1.2 预期效果

FVS实现动态折叠树，效果如下图所示：

1.3 实现思路

1）设置参数，为条件属性判断做准备。

2）设置条件属性，点击具体销售员，若与参数内容相同，则清空参数内容；若不同，则将当前具体销售员赋值给参数。

3）设置条件属性，若具体销售员与参数内容相同，则展开数据；若不同，则折叠数据。

2.1 新建模板

1）点击菜单栏「文件>新建可视化看板」，保持默认的「创建空白看板」选项。

2）可视化看板名称自定义为 FVS实现动态折叠树 ，画布大小保持默认的「1280*720px」。

3）模板样式选择「浅色主题一」，点击「创建看板」，如下图所示：

2.2 准备数据

1）点击左下角数据集管理面板的「+」按钮，选择「数据库查询」。

2）在数据库查询设置框中，名字保持默认的 ds1 ，数据库选择默认的内置数据库 FRDemo 。

3）输入 SQL 语句：SELECT * FROM 销量，意为查询销量表中的全部数据。

4）点击「确定」，如下图所示：

2.3 设计表格

1）点击组件列表栏中的「文字」，将「表格」组件拖入空白画布中。

2）点击右侧配置栏的「编辑组件」按钮，即可进入组件编辑界面，如下图所示：

3）进入组件编辑页面后，将 ds1 中的「销售员」拖入 A1 单元格、「产品类型」拖入 B2 单元格，「产品」拖入 C2 单元格，「销量」拖入 D2 单元格，如下图所示：

4）在 E1 单元格中插入公式：$spe，意为一个名为 spe（“销售员”英文“salesperson”的缩写）的参数，点击「确定」，如下图所示：

5）选中 B2 单元格，点击右侧属性面板中的「单元格属性」，左父格自定义为 A1 单元格，如下图所示：

6）选中 B2 单元格，点击右侧属性面板中的「单元格元素」，数据设置为「列表」，如下图所示：

7）选中 E1 单元格，点击右侧属性面板中的「单元格属性」，左父格设置为无，如下图所示：

2.4 超级链接条件属性

2.4.1 条件属性一

1）选中 A1 单元格，点击右侧属性面板中的「条件属性」按钮，点击添加条件旁的「+」按钮。

2）在弹出的条件属性设置框中点击「+」按钮，设置条件属性为「超级链接」类型。

3）公式条件类型选择「公式」，输入公式：E1 = A1，点击「+增加」按钮添加公式。

4）勾选「使用链接」，点击「编辑」按钮，如下图所示：

5）进入超级链接编辑框后，点击添加链接旁的「+」按钮，添加「当前页面对象」，当前页面对象选择「表格1_页面1」。

6）点击参数设置面板右上角的「+」按钮，添加之前设置的参数 spe ，值为空，点击「确定」，如下图所示：

7）A1 单元格的 超级链接条件属性1 设置完成，意为当 E1 单元格的内容和 A1 单元格的内容相同时，将 E1 单元格内的参数 spe 清空。

2.4.2 条件属性二

1）同样的方法为 A1 单元格添加 超级链接条件属性2 ，如下图所示：

2）同样的方法添加「当前页面对象」，同样添加之前设置的参数 spe ，值为公式：$$$ 。

3）A1 单元格的 超级链接条件属性2 设置完成，意为当 E1 单元格的内容和 A1 单元格的内容不同时，将 E1 单元格内的参数 spe 赋当前值。

2.5 行高条件属性

2.5.1 条件属性一

1）与2.2节同样的方法为 A2 单元格添加 行高条件属性1 ，属性为「行高」，设置为「5像素」。

2）公式条件类型选择「公式」，输入公式：E1 = A1，点击「+增加」按钮添加公式，如下图所示：

3）A2 单元格的 行高条件属性1 设置完成，意为当 E1 单元格的内容与 A1 单元格的内容相同时，行高为 5 像素，即展开数据。

2.5.2 条件属性二

1）同样的方法为 A2 单元格继续添加 行高条件属性2 ，属性为「行高」，设置为「0像素」。

2）公式条件类型选择「公式」，输入公式：E1 != A1，点击「+增加」按钮添加公式，如下图所示：

3）A2 单元格的 行高条件属性2 设置完成，意为当 E1 单元格的内容与 A1 单元格的内容不同时，行高为 0 像素，即折叠数据。

2.6 隐藏E列

选中 E 列，右键选择「隐藏」，即可隐藏不需要显示的 E 列。

2.7 效果查看

2.7.1 PC 端

保存模板，点击右上角「预览」按钮，效果同本文 1.2 节。

2.7.2 移动端

预览方式请参考 FVS移动端预览 ，APP 及 HTML5 端效果如下图所示：

点击下载完成模板：FVS实现动态折叠树.fvs