JS 實現動態隱藏參數以及控制參數面板高度

1.1 版本

1.2 預期效果

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

注1：報表凍結時，此方案在「分頁預覽」自適應效果不好，建議使用者使用其他預覽方式。

注2：填報多 sheet 時，隱藏參數的程式碼會使得 sheet 標籤位置上移，影響美觀性，建議使用者在此場景下不使用該方案。

1.3 實現思路

為「按鈕元件」新增點選事件，當點選按鈕時，隱藏或顯示指定的其他類型元件。

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 程式碼如下所示：

注：填報多 sheet 時，隱藏參數的程式碼會使得 sheet 標籤位置上移，影響美觀性，建議使用者在此場景下不使用該方案。

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);
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', FR.tempParameterContainerHeight);
	FR.parameterContainerHeight = FR.tempParameterContainerHeight;
	$('#content-container').css('top', FR.tempParameterContainerHeight);
	$('#content-container').css('height', window.tempContentContainerHeightBackup);
	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.4 預覽效果

儲存範本，點選「分頁預覽」，PC 端效果如下所示：

注：不支援行動端。

已完成範本請參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\參數介面JS實體\21-JS實現動態隱藏參數以及控制參數面板高度.cpt

點選下載範本：21-JS实现动态隐藏参数以及控制参数面板高度.cpt