JS实现切换tab显示/隐藏参数面板上的控件

  • 文档创建者:devilddr
  • 编辑次数:18次
  • 最近更新:Carly 于 2019-10-09
  • 1. 概述

    1.1 问题描述

    页签式报表的需求,即需要点击某页签时,参数面板中的部分参数隐藏。

    • 点击标题 1,只出现订单 ID 参数:

    222

    • 点击标题0,同时出现订单ID和运货商参数:

    222

    1.2 解决思路

    在 body 组件上添加初始化后事件,在 JS 中使用 setTimeout 函数来监听页签的事件状态,因为无法获取页签。

    222
    所以这里通过 jQuery  类名选择器,我们利用 eq 选择到我们的页签控件 绑定 click 事件。

    2. 示例

    2.1 添加数据集

    选择文件>新建决策报表,添加数据集 ds1: SELECT * FROM S订单

    2.2 添加参数

    1)点击模板>模板参数,新增两个参数,分别命名为订单 ID 运货商,如下图所示:

    222

    2)将参数面板拖入报表主体,点击参数面板空白处,在设计器右侧的控件设置中,点击全部添加

    222
    222

    2.3 添加 Tab 标签

    将 Tab 块拖入报表主体,并新增一个 Tab 标签页:

    222

    2.4 添加初始化后事件

    1)这里要实现运货商控件在点击第二个 Tab 标签页时隐藏,点击第一个 Tab 标签页时出现。

    右上角选中 body 控件,添加一个初始化后事件

    222

    JS 代码如下:

    setTimeout(function() {
        $(".fr-widget-click").eq(2).bind("click", function() {
            $("div[widgetname$='运货商']").show();
        });
        $(".fr-widget-click").eq(3).bind("click", function() {
            $("div[widgetname$='运货商']").hide();
        });
    }, 100);

    注:若控件名为英文名,则需要大写,否则不能识别。

    2) 对于使用其他样式模板的 tabpane ,上面的方式不再适用,因为其他样式模板使用 canvas 绘制,没有对应的 dom 元素,可以使用以下方案替代

    在 tabpane 上添加tab切换事件,如下所示:

    1568967268836761.png

    JS 代码如下:

    var tabpane = this.getWidgetByName("TABPANE0");
    switch(tabpane.mouseInTab){
    case 0:
    $("div[widgetname$='运货商']").show();
    break;
    case 1:
    $("div[widgetname$='运货商']").hide();
    break;
    default:
    break;
    }

    3. 预览效果

    PC 端预览效果如下图所示

    222

    注:不支持移动端。

    4. 已完成模板

    已完成模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\22-JS实现切换tab显示或隐藏参数面板上的控件.frm

    点击下载模板:22-JS实现切换tab显示或隐藏参数面板上的控件.frm

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览