1.1 问题描述

报表自带的参数面板默认是显示的，如果想隐藏，需要点击参数面板下面的小三角图标，再次显示需要再次点击，这样比较麻烦，于是有客户想在查看内容时自动隐藏参数面板，在鼠标移动在上面时再次恢复参数面板，效果如下图所示：

1.2 实现思路

通过添加加载结束事件来实现此功能。

$('.parameter-container-collapseimg-down').click();//点击参数面板下拉按钮，即显示参数面板
$(".parameter-container-collapseimg-up").click()//点击参数面板收缩按钮，即隐藏参数面板

2.1 示例一：鼠标移动显示或隐藏参数面板

1）打开模板：%FR_HOME%\webroot\WEB-INF\reportlets\GettingStarted.cpt。

2）点击菜单模板>模板 Web 属性>分页预览设置，选择为该模板单独设置，添加加载结束事件，如下图所示：

JavaScript 代码如下：

$('.fr-horizontalboxlayout').bind('mouseover',function(){ 
$('.parameter-container-collapseimg-down').click();//鼠标移动到上方时，显示参数面板 
}); 
$('.content-container').bind('mouseover',function(){
$('.parameter-container-collapseimg-up').click();//鼠标进入到主内容页面时，隐藏参数面板 
})

3）保存后，点击分页预览，点击查询按钮，效果如描述中所述，查看内容时自动隐藏参数面板，在鼠标移动在上面时再次恢复参数面板。

2.2 示例二：鼠标点击显示或隐藏参数面板

如果不需要鼠标经过主内容，而是点击主内容才隐藏参数面板，在菜单模板>模板 Web 属性>分页预览设置，选择为该模板单独设置，添加加载结束事件，如下图所示：

JavaScript 代码如下：

$('.fr-horizontalboxlayout').bind('click',function(){ 
$('.parameter-container-collapseimg-down').click(); 
});
$('.content-container').bind('click',function(){ 
$('.parameter-container-collapseimg-up').click(); 
})

保存后，点击分页预览，点击查询按钮，在主内容点击鼠标左键，隐藏参数面板，将鼠标移动到参数面板上点击鼠标左键，显示参数面板。

2.3 示例三：预览自动隐藏参数面板 

如果想实现模板预览即隐藏参数面板，选择参数面板，在右侧的控件设置中选择 para 控件，在事件中添加初始化后事件，如下图所示：

JavaScript 代码如下：

setTimeout(function() { 
$('.parameter-container-collapseimg-up').trigger("click"); 
//点击打开报表100ms后自动收起参数面板 
}, 100);

保存后，点击分页预览，模板加载 100ms 后自动隐藏参数面板。

2.4 预览效果

1）示例一：鼠标移动显示或隐藏参数面板

2）示例二：鼠标点击显示或隐藏参数面板

3）示例三：预览自动隐藏参数面板

1）示例一

模板效果在线查看请点击：JS 实现参数面板自动隐藏与显示-示例一.cpt

已完成的模板，可参见：%FR_HOME%\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例一.cpt

点击下载模板：09-JS实现参数面板自动隐藏与显示-示例一.cpt

2）示例二

模板效果在线查看请点击：JS 实现参数面板自动隐藏与显示-示例二.cpt

已完成的模板，可参见：%FR_HOME%\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例二.cpt

点击下载模板：09-JS实现参数面板自动隐藏与显示-示例二.cpt

3）示例三

模板效果在线查看请点击：JS 实现参数面板自动隐藏与显示-示例三.cpt

已完成的模板，可参见：%FR_HOME%\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例三.cpt

点击下载模板：09-JS实现参数面板自动隐藏与显示-示例三.cpt