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

编辑
  • 文档创建者:yets11
  • 浏览次数:9585次
  • 编辑次数:13次
  • 最近更新:Kevin-s 于 2019-11-20
  • 1. 概述

    1.1 问题描述

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

    1.2 实现思路

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

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

    2. 示例

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

    1)打开模板:%FR_HOME%\webroot\WEB-INF\reportlets\GettingStarted.cpt

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

    image.png

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

    image.png

    JavaScript 代码如下:


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

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

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

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

    image.png

    JavaScript 代码如下:

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

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

    2.4 预览效果

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

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

    222

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

    222

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

    222


    注:不支持移动端


    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


    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

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

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