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

目录:

1. 描述

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

2. 思路

通过添加加载结束事件来实现此功能。
$('.parameter-container-collapseimg-down').click();//点击参数面板下拉按钮，即显示参数面板
$(".parameter-container-collapseimg-up").click()//点击参数面板收缩按钮，即隐藏参数面板

3. 操作步骤

3.1 示例一：鼠标移动显示或隐藏参数面板
1）打开模板：%FR_HOME%\WebReport\WEB-INF\reportlets\GettingStarted.cpt。
2）点击菜单模板>模板Web属性>分页预览设置，选择为该模板单独设置，添加加载结束事件，如下图所示：

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

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

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

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

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

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

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

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

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

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

4. 预览效果

4.1 PC端预览效果

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

4.2 移动端预览效果

示例一和示例二不支持移动端，示例三预览自动隐藏参数面板的js也不支持移动端，但是当参数面板中设置了不勾选点击查询前不显示报表内容时，移动端预览报表时默认是不会显示参数面板的。

5. 已完成模板

1）示例一
模板效果在线查看请点击：JS实现参数面板自动隐藏与显示-示例一.cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例一.cpt
点击下载模板
2）示例二
模板效果在线查看请点击：JS实现参数面板自动隐藏与显示-示例二.cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例二.cpt
点击下载模板
3）示例三
模板效果在线查看请点击：JS实现参数面板自动隐藏与显示-示例三.cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例三.cpt
点击下载模板

附件列表


主题：
标签： 已验证 9.0验证

文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）