我们在开发报表的时候经常会遇到使用的参数控件较多的情况，而参数面板上的部分参数控件一般为默认选择值，这时候可以通过对这部分参数进行隐藏，并设置控制参数面板的高度，隐藏不需要的控件。

通过增加两个参数按钮控件，一个查看所有控件，一个隐藏部分控件，通过点击这两个按钮增减参数面板上的控件，实现上面功能。

3.1 添加参数

在 FineReport 设计器中点击 文件>新建普通报表，在新建报表的参数面板上添加多个控件，如下图所示：

3.2 修改控件名称

1）分别选中参数面板上的 button1 和 button3 按钮控件，在右侧属性面板>控件设置>高级中，找到「按钮名字」在其右侧为这两个按钮控件添加名字，分别为「查看所有参数」和「隐藏所有参数」。下图只展示 button1 添加按钮名称后的情况：

2）分别选中参数面板上最后一行的控件，在右侧属性面板>控件设置>基本中，找到「控件名称」在其右侧分别输入控件名称 a，b，c，d，e，f。下图只展示其中一个控件添加控件名称后的情况：

3.3 添加点击事件

1）为「查看所有参数」按钮添加点击事件。

选中该按钮，在右侧属性面板>控件设置>事件中，添加点击事件，如下图所示：

JS 代码如下所示：

var a= this.options.form.getWidgetByName("a");
var b= this.options.form.getWidgetByName("b");
var c= this.options.form.getWidgetByName("c");
var d= this.options.form.getWidgetByName("d");
var e= this.options.form.getWidgetByName("e");
var f= this.options.form.getWidgetByName("f");
a.setVisible(true);
b.setVisible(true);
c.setVisible(true);
d.setVisible(true);
e.setVisible(true);
f.setVisible(true);
setTimeout(function() {   
 $('.parameter-container').css('height', '160px');    
 $('#content-container').css('top', '160px');
 }, 1000);

2）为「隐藏所有参数」按钮添加点击事件。

选中该按钮，在右侧属性面板>控件设置>事件中，添加点击事件，如下图所示：

JS 代码如下所示：

var a= this.options.form.getWidgetByName("a");
var b= this.options.form.getWidgetByName("b");
var c= this.options.form.getWidgetByName("c");
var d= this.options.form.getWidgetByName("d");
var e= this.options.form.getWidgetByName("e");
var f= this.options.form.getWidgetByName("f");
a.setVisible(false);b.setVisible(false);
c.setVisible(false);d.setVisible(false);
e.setVisible(false);f.setVisible(false);
setTimeout(function() {    
$('.parameter-container').css('height', '105px');  
  $('#content-container').css('top', '105px');
  }, 1000);

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

注：该方法不支持移动端。

已完成的模板，请参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\21-隐藏参数面板.cpt

点击下载模板：21-隐藏参数面板.cpt