[通用]巧用Tab组件实现App的布局效果

1.1 版本

1.2 应用场景

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

2.1 新建模板

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

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

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

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

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

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

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

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

2.2 参数联动

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

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

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

2.2.1 report0 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2.2 report1

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

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

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

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

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

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

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

2.3 效果预览

参见1.2节。

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

已完成模板查看：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\analytics\sales\行业榜单排名.frm 。