JS实现参数面板自动隐藏与显示

1. 概述
1.1 问题描述

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

1.2 实现思路

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

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

复制代码

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

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

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

JavaScript 代码如下：

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

复制代码

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

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

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

JavaScript 代码如下：

1. $('.fr-horizontalboxlayout').bind('click',function(){
   
2. $('.parameter-container-collapseimg-down').click();
   
3. });
   
4. $('.content-container').bind('click',function(){
   
5. $('.parameter-container-collapseimg-up').click();
   
6. })

复制代码

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

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

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

JavaScript 代码如下：

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

复制代码

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

2.4 预览效果

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

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

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

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

注：不支持移动端

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

666666

支持FRM吗

请问。决策报表frm 如何实现呢？

决策报表咋实现

666666