反馈已提交
网络繁忙
开发报表的时,经常会遇到使用的参数控件较多的情况,这时候可以对一些不常用、不需要展现出来的的控件进行隐藏,当需要展示的时候再使其展示出来,如下图所示:
注1:报表冻结时,此方案在「分页预览」自适应效果不好,建议用户使用其他预览方式。
注2:填报多 sheet 时,隐藏参数的代码会使得 sheet 标签位置上移,影响美观性,建议用户在此场景下不使用该方案。
为「按钮控件」添加点击事件,当点击按钮时,隐藏或显示指定的其他类型控件。
新建模板,在「参数面板」上添加多个控件,如下图所示:
1)修改参数面板中 button1 、 button3 「按钮控件」的按钮名称为分别为「查看所有参数」和「隐藏所有参数」。如下图所示:
2)为后面添加的 JS 代码简洁,分别修改参数面板上最后一行的控件的「控件名称」a,b,c,d,e,f。如下图所示:
注:这里也可以不做修改,在后面添加的 JS 代码中对应控件名称即可。
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)为「隐藏所有参数」按钮添加点击事件。选中该按钮,在右侧「控件设置>事件」中,添加「点击」事件,如下图所示:
注:填报多 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);
保存模板,点击「分页预览」,PC 端效果如下所示:
注:不支持移动端。
已完成模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\21-JS实现动态隐藏参数以及控制参数面板高度.cpt
点击下载模板:21-JS实现动态隐藏参数以及控制参数面板高度.cpt
售前咨询电话
400-811-8890转1
在线技术支持
请前往「服务平台」,选择「在线支持」
热线电话:400-811-8890转2
总裁办24H投诉
热线电话:173-1278-1526
文 档反 馈
鼠标选中内容,快速反馈问题
鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。
不再提示
10s后关闭