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

编辑
  • 文档创建者:yets11
  • 浏览次数:6707次
  • 编辑次数:10次
  • 最近更新:宋会青 于 2019-03-29
  • 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属性>分页预览设置,选择为该模板单独设置,添加加载结束事件,如下图所示:


    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属性>分页预览设置,选择为该模板单独设置,添加加载结束事件,如下图所示:


    js代码如下:

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

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

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

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


    js代码如下:

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

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

    4. 预览效果

    4.1 PC端预览效果

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


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


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


    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

    此页面有帮助吗?只是浏览 [ 去社区提问 ]