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

编辑
文档创建者:yets11 (67190 )     浏览次数:5761次     编辑次数:9次     最近更新:张小乐 于 2019-03-10     

目录:

1. 描述编辑

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

2. 思路编辑

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

3. 操作步骤编辑

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

222
js代码如下:

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

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

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

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

222

js代码如下:

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

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

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

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

222

js代码如下:

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

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

4. 预览效果编辑

4.1 PC端预览效果

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

222

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

222

3)示例三:预览自动隐藏参数面板

222

4.2 移动端预览效果

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

5. 已完成模板编辑

1)示例一
已完成的模板,可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例一.cpt
2)示例二
已完成的模板,可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例二.cpt
3)示例三
已完成的模板,可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例三.cpt

附件列表


主题: 设计思路
如果您认为本文档还有待完善,请编辑

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