FVS实现数据库表字段控制Tab标签页隐藏

1.1 预期效果

注：用户使用该模板时需要先准备数据库表。

通过数据库表中设置的字段值，控制 FVS 中 Tab 组件标签页是否显示。

数据库表有两个字段：TYPE（春、夏、秋、冬）和 SITUATION（显示、隐藏）。如下图所示：

Tab 组件共有 4 个标签页：春、夏、秋、冬，前端展现时根绝数据库表的 SITUATION 字段内容只显示春、夏。如下图所示：

1.2 实现思路

在数据库表中添加控制 Tab 组件标签页是否显示的权限值，通过表格组件的初始化后事件实现。

2.1 准备数据库表

首先在本地数据库中新建一个表，表名为 SEASON，包含两个字段为 TYPE 和 SITUATION 。表样式如下图所示：

2.2 新建模板

1）点击设计器左上角菜单栏「文件>新建可视化看板」，创建一张空白可视化看板。如下图所示：

2）根据实际情况自定义可视化看板名称、画布大小、模板样式，最后点击「创建看板」。如下图所示：

2.3 添加并设计 Tab 组件

1）点击模板画布左上角「其他>Tab」，将 Tab 组件添加到画布中。如下图所示：

2）点击组件右上角「新建标签页」再添加三个标签页。如下图所示：

3）向每个标签页中均拖入一个表格组件，并调整组件大小。以 标签页1 为例，如下图所示：

4）选中右侧 Tab 列表中的 Tab 组件，点击「组件」，名称设置为「季节」。如下图所示：

5）4 个标签页的名称分别设置为「春、夏、秋、冬」，标题内容也分别设置「春、夏、秋、冬」。以标签页1 为例，如下图所示：

6）4 个表格组件的名称分别设置为「Sping、Summer、Autumn、Winter」，即英文的春、夏、秋、冬。以 表格1 为例，如下图所示：

7）选中表格组件，点击「内容」，点击「编辑组件」按钮可进入组件编辑界面。以 Sping 为例，如下图所示：

8）进入表格组件编辑界面后，可输入自定义的文本内容。以 Sping 为例，如下图所示：

9）点击组件编辑界面左上角的「返回可视化看板」可返回可视化看板界面。

10）选中右侧 Tab 列表的 Tab 组件，点击「内容」，布局方式设置为「等分布局」。如下图所示：

2.4 添加初始化后事件

选中任意一个表格组件，添加一个初始化后事件。

1）以表格 Spring 为例，选中右侧 Tab 列表中的表格 Spring ，点击「交互>添加事件>初始化后>JavaScript」输入 JS 代码。如下图所示：

JS 代码如下所示：

setTimeout(function(){
for(var i = 0; i < a.length; i++) { 
    for(var j=0;j<= a[i].length;j++){ 
duchamp.getWidgetByName('季节').getPage(a[j]).setVisible(false);
    }
}
  }, 50)

2）继续点击「参数设置」，添加一个参数a ，参数类型选择「自定义公式编辑」，值为公式：split(SQL("FRDemo","SELECT TYPE FROM SEASON WHERE SITUATION='隐藏'",1),",") 。公式说明如下表所示：

2.5 效果预览

2.5.1 PC 端

模板完成后，点击右上角「预览」。效果如 1.1 节预期效果所示。

2.5.2 移动端

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

点击下载模板：FVS中实现数据库表字段控制标签页隐藏.fvs