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

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_5326.gif

2. 思路

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

1)TAB切换事件:

setTimeout(function(){

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

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

},50);

2)TAB初始化事件:

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

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

http://help.finereport.com/uploads/201808/20180813104958_2611.png

JS脚本如下:

setTimeout(function(){

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

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

},50);

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

http://help.finereport.com/uploads/201808/20180813104958_6013.png

JS脚本如下:

this.options.form.getWidgetByName("tabpane0").showCardByIndex(window.IndexNum);

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

4. 预览效果

4.1 PC端预览效果

http://help.finereport.com/uploads/201808/20180813104958_7304.gif

4.2 移动端预览效果

注:不支持移动端。

5. 已完成模板

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

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

右击存储模板

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值