1. 概述

1.1 问题描述

在实际项目中，使用决策报表的时候，有时会用到在决策报表参数面板获取报表控件的值，那么该如何实现呢？

1.2 实现思路

使用 JS 获取报表主体的控件值：

_g().getWidgetByName("area").getValue(); //获取报表主体控件area的控件值

注：该方案支持新版决策报表。

2. 示例

2.1 设计报表

1）新建决策报表，将 body 的布局方式修改为绝对布局。如下图所示：

2）在 body 中拖入一个「标签控件」和「文本控件」，将标签控件的控件值修改为地区是：如下图所示：

3）将「文本控件」的控件名称修改为 area，如下图所示：

4）在 body 中拖入参数面板，在参数面板中添加一个「按钮控件」，将按钮名称改为：获取报表主体控件值，如下图所示：

2.2 添加事件

选中参数面板上「按钮控件」，添加一个「点击」事件。事件作用为点击按钮时弹窗打印报表中文本控件的值。如下图所示：

JavaSccript 代码如下：

var label = _g().getWidgetByName("label0").getValue(); //获取标签控件label0的控件值

var area = _g().getWidgetByName("area").getValue(); //获取文本控件area的控件值

alert(label + area);

2.3 效果预览

1）点击参数面板空白处，取消勾选「点击查询前不显示报表内容」，使得报表初始化时展现报表内容。如下图所示：

2）保存模板，点击「PC端预览」，在报表「文本控件」中输入值华东，点击参数面板按钮，弹窗显示文本控件的值。PC 端效果如下图所示：

App 及HTML5 效果如下图所示：

3. 概述

3.1 问题描述

在设计决策报表时，需要通过决策报表主体的按钮控件或者报表块的超链接获取参数面板的控件值，那么该如何实现呢？

3.2 解决思路

通过内置接口和 JS 事件获取参数面板的控件值：

_g().getParameterContainer().getWidgetByName('text').getValue();//text为参数面板里的控件名称

4. 示例

4.1 设计报表

1）新建一张决策报表，拖入参数面板，在参数面板中添加「文本框控件」和「查询按钮」，将「文本框控件」的控件名改为text，控件值填入我是参数控件。如下图所示：

2）点击参数面板空白处，取消勾选「点击查询前不显示报表内容」属性。如下图所示：

3）在决策报表主体拖入一个「按钮控件」和报表块，按钮名字改为获取参数控件值。如下图所示：

4.2 添加点击事件

选中「按钮控件」，为其添加一个「点击」事件，如下图所示：

JavaScript 代码如下：

alert(_g().getParameterContainer().getWidgetByName('text').getValue()); //获取参数面板的文本框text的控件值

4.3 添加超级链接

2.2 节中实现了点击按钮获取参数面板控件值，2.3 节将在超链接中添加 JS，实现点击超链接获取参数面板控件值。

在报表块 A1 单元格中输入获取参数控件值，并为其添加「超级链接」。如下图所示：

JavaScript 代码如下：

alert(_g().getParameterContainer().getWidgetByName('text').getValue());//获取参数面板的文本框text的控件值

2.4 预览效果

2.4.1 PC 端

保存模板，预览后点击按钮和超链，获取控件值的效果如 1.1问题描述中所示。

2.4.2 移动端

支持 App 端和 HTML5 端预览。如下图所示：

总结

帆软FineReport在设计决策报表时，帆软报表分析与制作需要通过决策报表主体的按钮控件或者报表块的超链接获取参数面板的控件值，通过内置接口和 JS 事件获取参数面板的控件值进行全链路数据建设。

自定义报表-FineReport JS实现隐藏Tab页相关推荐

easyUI tabs 显示与隐藏 tab 页
easyUI tabs 显示与隐藏 tab tabs [javascript] view plaincopy tab_option = $('#tabs').tabs('getTab'," ...
js 跨浏览器tab页通信
问题今天遇到一个问题,在商品列表页面,打开一个新增商品的页面,新增完后,商品列表要立刻显示新增商品,这就需要新增商品后,通知订单列表页,也就是常说的跨tab页通信.跨tab页通信,不仅包含常见的跨t ...
easyui中tab页中js脚本无法加载的问题及解决方法
我发现tab页中<script src="xxx.js">方式加载的脚本没有生效,firebug看请求也没有请求相应的脚本文件. 单独在浏览器中打开tab页中的页面js ...
js利用tab键切换当前页面_js小技巧：tab页切换
依旧只是贴在这里备份,方便以后粘贴复制,高手绕过,以免浪费时间:) tab页切换 function switchTab(ProTag, ProBox) { for (i = 1; i < 5; ...
bootdo项目，js打开页面为新的tab页
bootdo 打开新页面为新的tab页 contabs.js 最后添加一下代码 * 新增一个选项卡* url :选项卡的内容(跳转的地址)* title:选项卡的标题* size: name的ifra ...
js css3实现tab,div+css+js实现tab页
实现tab页并水平居中 ruby { font-size:60px; color:red; font-family:微软雅黑; } .tab { border:solid 1px; border-co ...
用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
动态路由和tab页切换路由
动态路由和tab页切换路由文章目录动态路由和tab页切换路由一.在当前页面监听路由的改变 1.beforeRouterEnter 进入前拦截路由 2.beforeRouterUpdate 路由更 ...
局部刷新时间 jsp_局部区块多个报表 TAB 页切换及局部区块的参数查询
在企业的业务系统中,如何从纷繁复杂的数据中抽丝剥茧看到关键数据信息呢?一个重要的途径就是将企业和各部门运营中关键的 KPI 集中在一起显示,同时尽量省去在企业的各个业务系统中分别查找数据. 下面是我近 ...

自定义报表-FineReport JS实现隐藏Tab页