反馈已提交

网络繁忙

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

  • 文档创建者:yiyemeiying
  • 编辑次数:26次
  • 最近更新:Alicehyy 于 2022-09-14
  • 1. 概述

    1.1 问题描述

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

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

    98528A1E-16E8-4FAF-A237-6BE672625CDA.GIF

    那如何能实现:点击查询后,不自动跳转到第一个 Tab 页,依然停留在当前 Tab 页呢?如下图所示:

    6D593237-AFB1-4E59-8C86-15CF75C61A26.GIF

    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);

    步骤如下图所示:

    Snag_98c54582.png

    2.3 新增初始化后事件

    选中 Tab 块控件,在控件列表中选择所选 Tab 块下方的「tabpane0」,添加一个「初始化后事件」,输入 JavaScript 代码:

    _g().getWidgetByName("tabpane0").showCardByIndex(FR.IndexNum);

    步骤如下图所示:

    Snag_98e3bf64.png

    2.4 效果预览

    2.4.1 PC 端

    保存模板,点击「PC端预览」,效果如 1.1 节图2所示。

    2.4.2 移动端

    App 端和 HTML5 端均支持,效果如下图所示:

    17646C0A-00F7-4A02-A454-29BE48F0AE10.GIF


    3. 模板下载

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

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

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    在线QQ(将在2023.01.05关停):800049425

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    7*24h

    智 能客 服