最新历史版本 :[通用]巧用Tab组件实现App的布局效果 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:
icon提示:
V11.5.1 版本起,设计器中取消 「新建决策报表」 入口,历史决策报表模板仍可正常编辑与访问。更推荐使用 FineVis数据可视化 ,作为专业的数据可视化工具,比决策报表制作可视化看板效率更高、效果更丰富 。

目录:

1. 概述编辑

1.1 版本

报表服务器版本APP 版本HTML5 移动端展现插件版本
功能变动
11.0V11.0V11.0
-

1.2 应用场景

Tab 组件能避免多层次钻取与返回,可以在一个报表内部进行切换,如下图所示:

动画4.gif


2. 示例编辑

2.1 新建模板

1)新建一张空白的决策报表,将左上角的「Tab块」拖入空白画布中。

22.png

2)点击右上角的编辑按钮 ,点击「+」增加一个 Tab标签页 ,如下图所示:

23.png

3)两个标签页 Tab00 、Tab10 的标题分别设置为「行业榜单」、「行业网站榜单」,如下图所示:

18.png

4)选中「行业榜单」标签页 ,将左上角的「Tab块」拖入其中,如下图所示:

19.png

5)点击右上角的编辑按钮,增加两个 Tab标签页 ,如下图所示:

20.png

6)三个标签页 Tab01 、Tab11 、Tab21 的标题分别为「手机行业」、「汽车行业」、「化妆品行业」,如下图所示:

21.png

7)同样的方法选中「行业网站榜单」标签页 ,将左上角的「Tab块」拖入其中,点击右上角的编辑按钮,点击「+」增加一个 Tab标签页。

8)两个标签页的标题分别为「行业排行榜」、「地区排行榜」,如下图所示:

24.png

2.2 参数联动

以「行业榜单>手机行业」为例说明组件间的参数联动,其余 Tab标签页 的设置方法相同。

1)点击数据集管理面板的「+」按钮,选择「内置数据集」,新建一个名为「手机」的内置数据集,点击「确定」,如下图所示:

15.png

2)选中「行业榜单>手机行业」,拖入两个报表块,如下图所示:

4.png

2.2.1 report0 

1)进入 report0 编辑页面,A1 、A2 、A3 单元格分别输入文本:「月度榜单」、「季度榜单」、「年度榜单」,如下图所示:

5.png

2)选中 A1 单元格,点击右侧属性面板的「超级链接」,点击「+」按钮,选择「当前决策报表对象」。

3)表单对象选择「report1」,点击「+」按钮添加参数,参数名为「a」,参数值为字符串「月度」,如下图所示:

6.png

4)同样的方法为单元格 A1 再次添加「当前决策报表对象」超链。

5)表单对象选择「report0」,点击「+」按钮添加参数,参数名为「line」,参数值为字符串「1」,如下图所示:

7.png

6)同样的方法继续为 A2 单元格添加两个「当前决策报表对象」超链:

  • 表单对象为「report1」,参数名为「a」,参数值为字符串「季度」。

  • 表单对象为「report0」,参数名为「line」,参数值为字符串「2」。

7)同样的方法继续为 A3 单元格添加两个「当前决策报表对象」超链:

  • 表单对象为「report1」,参数名为「a」,参数值为字符串「年度」。

  • 表单对象为「report0」,参数名为「line」,参数值为字符串「3」。

8)选中 A1 单元格,点击右侧属性面板的「条件属性」,点击「+」按钮。

9)在弹出的设置框中再次点击「+」按钮,设置字体颜色为「白色」,背景为「蓝色」。

10)选择「公式」,输入:$line = 1 ,点击「+增加」按钮添加公式,即当「line」等于 1 时,A1 单元格会变为蓝底白字,如下图所示:

8.png

11)同样的方法为 A2 、A3 单元格设置条件属性:

  • A2 单元格的条件属性为$line = 2时,字体颜色为「白色」,背景为「蓝色」,即当「line」等于 2 时,A2 单元格会变为蓝底白字。

  • A3 单元格的条件属性为$line = 3 时,字体颜色为「白色」,背景为「蓝色」,即当「line」等于 3 时,A3 单元格会变为蓝底白字

2.2.2 report1

1)进入「report1」编辑页面, A1 、B1 、C1 单元格分别输入文本:「排名」、「品牌」、「搜索指数」,如下图所示:

9.png

2)A2 单元格插入序号公式:seq(),并将左父格设置为 B2 ,即根据 B2 排序,如下图所示:

10.png

3)将内置数据集「手机」的「品牌」和「搜索指数」分别拖入B2、C2单元格,如下图所示:

11.png

4)选中 A2 单元格,点击右侧的「条件属性」,点击「+」按钮,设置当前行背景为「灰色」。

5)选择「公式」,输入:row()%2=0,点击「+增加」添加公式,即实现 隔行换色 ,如下图所示:

14.png

6)双击 B2 单元格,选择「过滤」,设置条件为:数据列「时间段」等于参数「a」,即 report1 中的数据根据参数「a」的值的变化而变化,点击「+增加」按钮添加公式,点击「确定」,如下图所示:

13.png

至此,「手机行业」Tab 标签页设置完成,其他 Tab 标签页的设置与上述步骤类似,本文不再赘述。

2.3 效果预览

参见1.2节。

注:效果预览时, body 的移动端属性「手机重布局」需取消勾选。

3. 下载模板编辑

点击下载模板:行业榜单排名.frm