JS实现切换sheet隐藏或显示参数面板里的控件

我是社区第485122位番薯,欢迎点我头像关注我哦~
1.概述
1.1 问题描述

有的时候我们想切换 sheet 时隐藏参数面板的控件,这里用查询按钮做演示,如下图:


1.2 实现思路

在填报页面的加载结束事件中,给 sheet 绑定点击事件,判断所点击的 sheet 名是否需要控件隐藏,在点击事件中通过 FR 提供的参数控件 JavaScript 实现参数控件的隐藏或显示。

2. 操作步骤2.1 打开模板

打开报表%FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStarted.cpt,新建一个 sheet2,如下图:


2.2 添加事件

点击模板>模板 Web 属性>填报页面设置(根据自己预览方式需要选择设置模式),选择为该模板单独设置,然后添加加载结束事件,如下图。注:(其中 widget3 为按钮名称)

注:由于这里添加的是加载结束事件,因此需要点击查询按钮让报表加载结束后,才有效果,如果不想点击查询按钮,可以把“点击查询前不显示报表内容”勾选去掉。

具体 JavaScript 如下:

  1. $(".fr-sheetbutton-container").click(function() //切换 sheet 时   
  2. {  
  3.     var a = contentPane.$contentPane.data('TabPane').tabBtns[contentPane.selectedIndex].options.name;  //获取当前s heet 的名字   
  4.     if(a == "sheet2") {  
  5.         contentPane.parameterEl.getWidgetByName("widget3").setVisible(false);  //隐藏查询按钮        
  6.     } else {  
  7.         contentPane.parameterEl.getWidgetByName("widget3").setVisible(true);  //显示查询按钮   
  8.     }  
  9. });
复制代码

JavaScript 代码说明如下:

$(".fr-sheetbutton-container").click(function() {});  //给 sheet 绑定点击事件
contentPane.$contentPane.data('TabPane').tabBtns[contentPane.selectedIndex].options.name;  //获取当前 sheet 的名字
contentPane.parameterEl.getWidgetByName("参数控件名").setVisible(boolean);  //设置参数控件是否可见

点击填报预览,点击查询按钮后,再切换 sheet,即可看到上面的效果。

2.3 预览效果

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


注:不支持移动端。


3. 已完成模板

模板效果在线查看请点击:JS 实现切换 sheet 隐藏或显示参数面板里的控件.cpt

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\01-JS实现切换sheet隐藏或显示参数面板里的控件.cpt

点击下载模板 :01-JS实现切换sheet隐藏或显示参数面板里的控件.cpt



编辑于 2020-12-15 16:01  

发表于 2021-1-25 14:30:35
填报预览有效,但为啥新填报预览无效
发表于 2022-6-27 14:39:04
如果多个sheet(超过3个)怎么写呢?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

3回帖数 7关注人数 13619浏览人数
最后回复于:2023-2-8 16:32

返回顶部 返回列表