JS 实现动态隐藏参数以及控制参数面板高度- FineReport帮助文档

1. 概述

1.1 預期效果

開發報表的時，經常會遇到使用的參數控件較多的情況，這時候可以對一些不常用、不需要展現出來的的控件進行隐藏，當需要展示的時候再使其展示出來，如下圖所示：

1.2 實現思路

爲「按鈕控件」添加點擊事件，當點擊按鈕時，隐藏或顯示指定的其他類型控件。

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);
//改變參數面板高度
setTimeout(function() {   
 $('.parameter-container').css('height', '160px');    
 $('#content-container').css('top', '160px');
 }, 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);
//改變參數面板高度
setTimeout(function() {    
$('.parameter-container').css('height', '105px');  
  $('#content-container').css('top', '105px');
  }, 1000);
顯示代碼