微信公众号：次世代数据技术 关注可了解更多的教程。问题或建议，请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号：weibw162

本教程视频讲解可以关注本人B站账号进行观看：次世代数据技术

一、需求描述 ​

我们在开发大屏或驾驶舱时，有事我们希望点击某块汇总的单元格，然后直接在原表的位置下钻到明细表，且不会影响整个大屏的结构，同时又支持明细表再回退到汇总表的功能，本文将提供一种可行的方案，其最终效果如下：

本方案的实现步骤如下：

1. 将明细表与汇总表同时存放到一个tab组件的不同tab块中，其中明细表在前，汇总表在后。
2. 页面初始化时要通过JS使tab组件展示的是汇总的表。
3. 汇总表单元格点击时通过超链接将参数传递给明细表，并通过JS将显示的tab块调整到明细表所在tab块。

注1：不支持移动端使用。注2：本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证，如果您在使用其他版本过程中出现问题可以联系本作者。

二、具体操作 ​

第一步 ​

在决策报表中拖入一个tab组件，然后新增两个tab块，两个tab块中分别放入两个报表块用来存放明细表数据和汇总表数据。同时，拖入一个报表块，用来存放返回上一级按钮。 注1：明细表一定要放在汇总表前面。注2：返回上一级的报表块一定要与tab组件同级，不要拖入到tab块内。

第二步 ​

将返回上一级报表块设置为不可见

第三步 ​

给汇总表的下钻单元格增加一个超级链接，类型为JavaScript脚本。将当前单元格的值作为参数传递进去，并填入如下代码： JavaScript脚本代码如下：

// 局部刷新明细表所在报表块
_g().getWidgetByName("report1").gotoPage(1, "{订单号:" + 订单号 + "}", true);
// 将tab组件显示的tab块调整为明细表所在tab块
_g().getWidgetByName("tabpane0").showCardByIndex(0);
// 设置返回上一级按钮显示
_g().getWidgetByName('返回上一级').setVisible(true);

// 局部刷新明细表所在报表块
_g().getWidgetByName("report1").gotoPage(1, "{订单号:" + 订单号 + "}", true);
// 将tab组件显示的tab块调整为明细表所在tab块
_g().getWidgetByName("tabpane0").showCardByIndex(0);
// 设置返回上一级按钮显示
_g().getWidgetByName('返回上一级').setVisible(true);

第四步 ​

给返回上一级按钮所在单元格添加超级链接，类型为JavaScript脚本，并填入如下代码： JavaScript脚本代码如下：

// 将tab组件显示的tab块调整为汇总表所在tab块
_g().getWidgetByName("tabpane0").showCardByIndex(1);
// 设置返回上一级按钮隐藏
_g().getWidgetByName('返回上一级').setVisible(false);

// 将tab组件显示的tab块调整为汇总表所在tab块
_g().getWidgetByName("tabpane0").showCardByIndex(1);
// 设置返回上一级按钮隐藏
_g().getWidgetByName('返回上一级').setVisible(false);

第五步 ​

通过给tab组件添加一个初始化事件，保证页面加载后展示的是汇总表所在tab块，其JavaScript代码如下： JavaScript脚本代码如下：

_g().getWidgetByName("tabpane0").showCardByIndex(1);

_g().getWidgetByName("tabpane0").showCardByIndex(1);

第六步 ​

通过调整tabpane的尺寸大小为0进而实现隐藏tab标题。

完成以上配置后，我们直接点击左上角的预览按钮，即可在浏览器中查看到与文章开头效果图类似的报表。

三、模板文件下载 ​

扫码即可下载文档示例模板及其他代码文件 如果您在阅读或实际操作过程中有问题，可以随时添加作者好友进行咨询。