1. 概述
1.1 问题描述
在使用决策报表的 Tab 块功能时,我们经常会遇到类似这样的问题:
当在一个 Tab 块中有多个 Tab 页存在,如果用户所处其他 Tab 页(非第一个 Tab 页),点击查询后,会自动跳转到第一个 Tab 页。如下图所示:
那如何能实现:点击查询后,不自动跳转到第一个 Tab 页,依然停留在当前 Tab 页呢?如下图所示:
1.2 解决思路
通过在 Tab 块中设置 JavaScript 脚本实现:
先通过「Tab 切换事件」获取到用户当前 Tab 页的标题索引,然后在点击查询后,通过「初始化后实践」定位到获取到的 Tab 标题索引页。
2. 示例
2.1 下载模板
本文主要示范 Tab 块 JavaScript 事件的设置,这里提供一个基础模板,模板内容不做具体介绍。
点击下载模板:多Tab页参数查询.frm ,点击设计器左上角「文件>打开」,打开下载的模板。
2.2 新增 Tab 切换事件
选中 Tab 块控件,在控件列表中选择所选 Tab 块下方的「tabpane0」,添加一个 「Tab切换事件」,输入 JavaScript 代码:
setTimeout(function()
{ //TAB切换后,获取到当前TAB块的标题索引
FR.IndexNum=_g().getWidgetByName("tabpane0").getShowIndex();
},1000);
步骤如下图所示:
2.3 新增初始化后事件
选中 Tab 块控件,在控件列表中选择所选 Tab 块下方的「tabpane0」,添加一个「初始化后事件」,输入 JavaScript 代码:
this.options.form.getWidgetByName("tabpane0").showCardByIndex(FR.IndexNum);
步骤如下图所示:
2.4 效果预览
2.4.1 PC 端
保存模板,点击「PC端预览」,效果如 1.1 节图2所示。
2.4.2 移动端
App 端和 HTML5 端均支持,效果如下图所示:
3. 模板下载
已完成模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现点击查询后停留在当前查询的tab页.frm
点击下载模板:JS实现点击查询后停留在当前查询的tab页.frm