商业报表工具-FineReport JS 实现动态隐藏参数以及控制参数面板高度

news2024/11/19 13:43:28

1. 概述

1.1 版本

报表服务器版本	功能变更
11.0	--

1.2 预期效果

开发报表的时，经常会遇到使用的参数控件较多的情况，这时候可以对一些不常用、不需要展现出来的的控件进行隐藏，当需要展示的时候再使其展示出来，如下图所示：

注：报表冻结时，此方案在「分页预览」自适应效果不好，建议用户使用其他预览方式。

1.3 实现思路

为「按钮控件」添加点击事件，当点击按钮时，隐藏或显示指定的其他类型控件。

2. 示例

2.1 添加控件

新建模板，在「参数面板」上添加多个控件，如下图所示：

2.2 修改控件名称

1）修改参数面板中 button1 、 button3 「按钮控件」的按钮名称为分别为「查看所有参数」和「隐藏所有参数」。如下图所示：

2）为后面添加的 JS 代码简洁，分别修改参数面板上最后一行的控件的「控件名称」a，b，c，d，e，f。如下图所示：

注：这里也可以不做修改，在后面添加的 JS 代码中对应控件名称即可。

2.3 添加点击事件

1）为「查看所有参数」按钮添加点击事件。选中该按钮，在右侧「控件设置>事件」中，添加「点击」事件，如下图所示：

JavaScript 代码如下所示：

var a = this.options.form.getWidgetByName("a");

var b = this.options.form.getWidgetByName("b");

var c = this.options.form.getWidgetByName("c");

var d = this.options.form.getWidgetByName("d");

var e = this.options.form.getWidgetByName("e");

var f = this.options.form.getWidgetByName("f");

a.setVisible(true);

b.setVisible(true);

c.setVisible(true);

d.setVisible(true);

e.setVisible(true);

f.setVisible(true);

if (!window.originalParameterContainerHeightBackup) {

window.originalParameterContainerHeightBackup = FR.parameterContainerHeight;

window.originalContentContainerHeightBackup = $('#content-container').height();

FR.tempParameterContainerHeight = 105;

window.tempContentContainerHeightBackup = window.originalContentContainerHeightBackup + window.originalParameterContainerHeightBackup - FR.tempParameterContainerHeight;

}

setTimeout(function() {

$('.parameter-container').css('height', window.originalParameterContainerHeightBackup);

$('#content-container').css('top', window.originalParameterContainerHeightBackup);

$('#content-container').css('height', window.originalContentContainerHeightBackup);

FR.parameterContainerHeight = window.originalParameterContainerHeightBackup;

if (contentPane) {

var $frozen;

var $tempContentPane;

if (contentPane.$contentPane) {

$tempContentPane = contentPane.$contentPane;

}

if (contentPane.curLGP && contentPane.curLGP.$sheet_container) {

$tempContentPane = contentPane.curLGP.$sheet_container;

}

if ($tempContentPane) {

$frozen = $(".frozen-table", $tempContentPane);

}

if ($frozen && $frozen.length > 0) {

FR.layoutFrozen($tempContentPane, $tempContentPane.offset().top);

}

}, 1000);

显示代码

2）为「隐藏所有参数」按钮添加点击事件。选中该按钮，在右侧「控件设置>事件」中，添加「点击」事件，如下图所示：

JavaScript 代码如下所示：

var a = this.options.form.getWidgetByName("a");

var b = this.options.form.getWidgetByName("b");

var c = this.options.form.getWidgetByName("c");

var d = this.options.form.getWidgetByName("d");

var e = this.options.form.getWidgetByName("e");

var f = this.options.form.getWidgetByName("f");

a.setVisible(false);

b.setVisible(false);

c.setVisible(false);

d.setVisible(false);

e.setVisible(false);

f.setVisible(false);