JS实现点击查询后停留在当前查询的tab页

水深无声 2022-01-31 20:31 303阅读 0赞

1. 描述

在使用表单的TAB块功能时，我们经常会遇到类似这样的问题：当在一个TAB块中有多个TAB页存在，如果用户所处其他TAB页（非第一个TAB页），点击查询后，会自动跳转到第一个TAB页（如图一）。如何能实现：点击查询后，不自动跳转到第一个TAB页，还是在用户当前TAB页呢（如图二）？

图一：

![http://help.finereport.com/uploads/201808/20180813104958\_8800.gif][http_help.finereport.com_uploads_201808_20180813104958_8800.gif]

图二：

![http://help.finereport.com/uploads/201808/20180813104958\_5326.gif][http_help.finereport.com_uploads_201808_20180813104958_5326.gif]

2. 思路

通过在TAB块中设置JavaSprite脚本来实现此功能。先通过切换事件获取到用户当前TAB页的标题索引，然后在点击查询后，直接初始化定位到获取到的tab标题索引页。

1）TAB切换事件：

![20190513150539344.png][]setTimeout(function()\{

*//TAB**切换后,获取到当前TAB块的标题索引*

window.IndexNum=\_g().getWidgetByName("tabpane0").getShowIndex();

\},50);

2）TAB初始化事件：

![20190513150539343.png][]this.options.form.getWidgetByName("tabpane0").showCardByIndex(window.IndexNum);

3. 操作步骤

1）打开%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\demo\\Oldchart\\advanced\\tab标签.frm文件，新增一个参数界面，添加查询控件：

![http://help.finereport.com/uploads/201808/20180813104958\_4410.png][http_help.finereport.com_uploads_201808_20180813104958_4410.png]

2）选中Tab块控件，在控件列表中选择所选tab块下方的tabpane0，新增一个Tab切换事件：

![http://help.finereport.com/uploads/201808/20180813104958\_2611.png][http_help.finereport.com_uploads_201808_20180813104958_2611.png]

JS脚本如下：

![20190513150539361.png][]setTimeout(function()\{

*//TAB**切换后,获取到当前TAB块的标题索引*

window.IndexNum=\_g().getWidgetByName("tabpane0").getShowIndex();

\},50);

3）选中Tab块控件，在控件列表中选择所选tab块下方的tabpane0，新增一个初始化后事件：

![http://help.finereport.com/uploads/201808/20180813104958\_6013.png][http_help.finereport.com_uploads_201808_20180813104958_6013.png]

JS脚本如下：

![20190513150539731.png][]this.options.form.getWidgetByName("tabpane0").showCardByIndex(window.IndexNum);

4）保存，点击表单预览，效果如上图二所示。

4. 预览效果

4.1 PC端预览效果

![http://help.finereport.com/uploads/201808/20180813104958\_7304.gif][http_help.finereport.com_uploads_201808_20180813104958_7304.gif]

4.2 移动端预览效果

注：不支持移动端。

5. 已完成模板

模板效果在线查看请点击：[JS实现点击查询后停留在当前查询的tab页.frm][JS_tab_.frm]

已完成的模板，可参见：%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\JS\\填报预览JS实例\\06-JS实现点击查询后停留在当前查询的tab页.frm

[右击存储模板][Link 1]

[http_help.finereport.com_uploads_201808_20180813104958_8800.gif]: /images/20220201/876860a6663d4e2f849b69558b5de7c1.png
[http_help.finereport.com_uploads_201808_20180813104958_5326.gif]: /images/20220201/6d25e1e458ad437bba059c87aef43c65.png
[20190513150539344.png]: /images/20220201/ebafec36ce524b51bf7cf575d602b026.png
[20190513150539343.png]: /images/20220201/4e5b970171554787a51b716389479301.png
[http_help.finereport.com_uploads_201808_20180813104958_4410.png]: /images/20220201/cd1323facefc42799a3e67ac24dd3acc.png
[http_help.finereport.com_uploads_201808_20180813104958_2611.png]: /images/20220201/debe7310474449b8b46425e5a34c9ac5.png
[20190513150539361.png]: /images/20220201/c04f6ce9ddc640cfbeddf0bf2e729bbc.png
[http_help.finereport.com_uploads_201808_20180813104958_6013.png]: /images/20220201/2aaab5a5210e4b548cb256a987e80e8e.png
[20190513150539731.png]: /images/20220201/789eea7ec46c48a19aa4a6396b3dcaeb.png
[http_help.finereport.com_uploads_201808_20180813104958_7304.gif]: /images/20220201/817ada6a2a41415eb20c8686d6e9292d.png
[JS_tab_.frm]: http://www.finereporthelp.com:8889/demo/ReportServer?formlet=doc/JS/%E8%A1%A8%E5%8D%95JS%E5%AE%9E%E4%BE%8B/06-JS%E5%AE%9E%E7%8E%B0%E7%82%B9%E5%87%BB%E6%9F%A5%E8%AF%A2%E5%90%8E%E5%81%9C%E7%95%99%E5%9C%A8%E5%BD%93%E5%89%8D%E6%9F%A5%E8%AF%A2%E7%9A%84tab%E9%A1%B5.frm
[Link 1]: http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/%E8%A1%A8%E5%8D%95JS%E5%AE%9E%E4%BE%8B/06-JS%E5%AE%9E%E7%8E%B0%E7%82%B9%E5%87%BB%E6%9F%A5%E8%AF%A2%E5%90%8E%E5%81%9C%E7%95%99%E5%9C%A8%E5%BD%93%E5%89%8D%E6%9F%A5%E8%AF%A2%E7%9A%84tab%E9%A1%B5.frm