帆软点击不同sheet页，显示不同过滤参数

  

1.描述

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

2. 思路

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

3. 操作步骤

3.1 打开模板

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

3.2 添加事件

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

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

具体js如下：

$(".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);  //显示查询按钮    
    }  
});  

$(".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);  //显示查询按钮    
    }  
});  

js代码说明如下：

$(".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