JS实现切换sheet隐藏或显示参数面板里的控件

编辑
  • 文档创建者:yi丶搁浅
  • 浏览次数:3333次
  • 编辑次数:12次
  • 最近更新:Kevin-s 于 2019-06-21
  • 1.描述

    有的时候我们想切换 sheet 时隐藏参数面板的控件,这里用查询按钮做演示,如下图:


    2. 思路

    在填报页面的加载结束事件中,给 sheet 绑定点击事件,判断所点击的 sheet 名是否需要控件隐藏,在点击事件中通过 FR 提供的参数控件 JavaScript 实现参数控件的隐藏或显示。

    3. 操作步骤

    3.1 打开模板

    打开报表%FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStarted.cpt新建一个 sheet2,如下图:


    3.2 添加事件

    点击模板>模板 Web 属性>填报页面设置(根据自己预览方式需要选择设置模式),选择为该模板单独设置,然后添加加载结束事件,如下图。注:(其中 widget3 为按钮名称)

    注:由于这里添加的是加载结束事件,因此需要点击查询按钮让报表加载结束后,才有效果,如果不想点击查询按钮,可以把“点击查询前不显示报表内容”勾选去掉。

    具体 JavaScript 如下:

    $(".fr-sheetbutton-container").click(function() //切换 sheet 时    
    {  
        var a = contentPane.$contentPane.data('TabPane').tabBtns[contentPane.selectedIndex].options.name;  //获取当前s heet 的名字    
        if(a == "sheet2") {  
            contentPane.parameterEl.getWidgetByName("widget3").setVisible(false);  //隐藏查询按钮        
        } else {  
            contentPane.parameterEl.getWidgetByName("widget3").setVisible(true);  //显示查询按钮    
        }  
    });  
    $(".fr-sheetbutton-container").click(function() //切换 sheet 时    
    {  
        var a = contentPane.$contentPane.data('TabPane').tabBtns[contentPane.selectedIndex].options.name;  //获取当前 sheet 的名字    
        if(a == "sheet2") {  
            contentPane.parameterEl.getWidgetByName("widget3").setVisible(false);  //隐藏查询按钮        
        } else {  
            contentPane.parameterEl.getWidgetByName("widget3").setVisible(true);  //显示查询按钮    
        }  
    });

    JavaScript 代码说明如下:

    $(".fr-sheetbutton-container").click(function() {});  //给 sheet 绑定点击事件 
    contentPane.$contentPane.data('TabPane').tabBtns[contentPane.selectedIndex].options.name;  //获取当前 sheet 的名字 
    contentPane.parameterEl.getWidgetByName("参数控件名").setVisible(boolean);  //设置参数控件是否可见

    点击填报预览,点击查询按钮后,再切换 sheet,即可看到上面的效果。

    4. 预览效果

    4.1 PC 端预览效果


    注:不支持移动端。


    5. 已完成模板

    模板效果在线查看请点击:JS 实现切换 sheet 隐藏或显示参数面板里的控件.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\01-JS实现切换sheet隐藏或显示参数面板里的控件.cpt

    点击下载模板 


    附件列表


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

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

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