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

编辑
  • 文档创建者:yiyemeiying
  • 浏览次数:7712次
  • 编辑次数:16次
  • 最近更新:Wendy123456 于 2019-10-16
  • 1. 概述

    1.1 问题描述

    在使用表单的 Tab 块功能时,我们经常会遇到类似这样的问题:

    当在一个 Tab 块中有多个 Tab 页存在,如果用户所处其他 Tab 页(非第一个 Tab 页),点击查询后,会自动跳转到第一个 Tab 页,如下图所示:

    222

    如何能实现:点击查询后,不自动跳转到第一个 Tab 页,还是在用户当前 Tab 页呢?如下图所示:

    222

    1.2 解决思路

    通过在 Tab 块中设置 JavaScript 脚本来实现此功能。先通过切换事件获取到用户当前 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);

    2. 示例

    2.1 添加查询控件

    打开%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Oldchart\advanced\tab标签.frm文件

    点击下载模板:tab标签.frm

    新增一个「参数界面」,添加「查询」控件,如下图所示:

    1571199588560231.png

    2.2 新增 Tab 切换事件

    选中 Tab 块控件,在控件列表中选择所选 Tab 块下方的「tabpane0」,新增一个 「Tab切换事件」,如下图所示

    1571020534653047.png

    JS 代码如下所示:

    setTimeout(function(){
    //TAB切换后,获取到当前TAB块的标题索引
    window.IndexNum=_g().getWidgetByName("tabpane0").getShowIndex();
    },50);

    2.3 新增初始化后事件

    选中 Tab 块控件,在控件列表中选择所选 Tab 块下方的「tabpane0」,新增一个「初始化后事件」,如下图所示:

    1571020742693534.png

    JS 代码如下所示:

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

    2.4 效果预览

    2.4.1 PC 端

    保存模板,点击表单预览,效果如下图所示:

    222

    2.4.2 移动端

    APP 效果如下图所示:

    99.gif

    注:该方法不支持 HTML5。

    3. 已完成模板

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

    点击下载模板:06-JS实现点击查询后停留在当前查询的tab页.frm

    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]