1.1 问题描述

客户想通过对报表块单元格的点击实现 Tab 标题的切换，该如何实现呢？如下图所示：

1.2 解决思路

通过单元格超级链接添加 JavaScript 脚本，实现 Tab 切换：

this.options.form.getWidgetByName('cardlayoutname').showCardByIndex(index); //切换显示tab

参考文档：Tab 布局

2.1 新建决策报表

拖入一个报表块和 Tab 块，添加三个 Tab 标题，模板设计如下图所示：

2.2 设置超级链接

右击 A2 单元格，选择超级链接>JavaScript脚本，添加JS代码，如下图所示：

JS 代码如下：

_g().options.form.getWidgetByName("tabpane0").showCardByIndex(0);

注：tabpane0 是指整个 tabpane0对象，index 是指的索引，从 0 开始。

同理 A3、A4 单元格也要添加超级链接-JavaScript脚本，将 JS 代码中的 index 修改为对应的索引即可。

• A3 单元格对应的 JS 代码为：_g().options.form.getWidgetByName("tabpane0").showCardByIndex(1);

• A4 单元格对应的 JS 代码为：_g().options.form.getWidgetByName("tabpane0").showCardByIndex(2);

注：不支持移动端。

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\09-JS实现点击超链切换TAB页.frm

点击下载模板：09-JS实现点击超链切换TAB页.frm