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

1.概述
1.1 问题描述

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

1.2 实现思路

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

2. 操作步骤2.1 打开模板

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

2.2 添加事件

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

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

具体 JavaScript 如下：

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

复制代码

JavaScript 代码说明如下：

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

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

2.3 预览效果

保存模板，点击分页预览，PC 端效果如下所示：

注：不支持移动端。

3. 已完成模板

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

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

点击下载模板 :01-JS实现切换sheet隐藏或显示参数面板里的控件.cpt

填报预览有效，但为啥新填报预览无效

如果多个sheet（超过3个）怎么写呢？