FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

作者：小满时间：2026-10-29 13:49:20浏览：84

本文详解FineReport参数面板的JS高级应用，涵盖控件联动显示、日期范围校验、一键重置及三角按钮隐藏。通过具体代码示例，展示如何利用setVisible、reset及DOM操作优化报表交互体验，解决条件显示、数据校验与界面清理等常见问题。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

在FineReport报表设计过程中，利用参数控件实现动态交互是提升用户体验的关键。有时我们需要根据特定条件控制部分参数控件的显示或隐藏，即当条件未满足时控件不可见，条件满足后自动显示。本文将详细介绍实现这一功能的具体方法。

FineReport中根据条件控制参数控件显示与隐藏的方法

一、问题描述

在报表参数设计中，常遇到需要根据前一个控件的选择结果来决定后一个控件是否显示的需求。例如，只有当用户在前一个下拉框中选择了具体内容后，第二个下拉框控件才会显示出来，否则保持隐藏状态。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

二、解决方案

实现该功能的核心思路是：首先将需要被控制的控件初始状态设置为不可见或不可用，然后在条件控件上绑定“编辑结束”事件。通过执行JavaScript脚本，根据条件判断结果动态设置被控控件的可见性或可用性。

setEnable(boolean)：用于设置控件是否可用，参数为true时表示可用，false时表示不可用；

setVisible(boolean)：用于设置控件是否可见，参数为true时表示可见，false时表示不可见；

三、示例说明

打开模板文件：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\parameter\MutiValue.cpt

本示例以模板中的area控件作为条件控件，province控件作为被控控件，详细演示设置过程。

四、初始化被控控件状态

选中province控件，进入属性面板的“基本属性”选项卡，取消勾选“可见”选项，使该控件在初始状态下不可见，具体操作参考下图。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

五、配置条件控件事件

为area控件添加“编辑结束”事件，并在该事件中调用JS脚本，将province控件设置为可见状态。具体代码配置如下。

在参数设计界面选中area下拉框控件，进入属性面板的“事件”选项卡，添加一个“编辑结束”事件，操作界面如下图所示。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

事件面板中填写的JS代码如下：

具体JS代码实现如下：


.  var province=this.options.form.getWidgetByName("province");                                      var area=this.options.form.getWidgetByName("area"); 
.  var thislen = this.getValue(area).length; 
.  if(thislen) province.setVisible(true); 
.  else alert("请选择地区");

日期控件校验JS应用

一、概述

在内置参数查询界面中，可以通过JS脚本进行数据校验。例如，设有“开始日期”和“结束日期”两个参数，我们需要校验：1. 两个日期均不能为空；2. 结束日期必须在开始日期之后；3. 结束日期与开始日期的间隔不能超过特定天数（如15天）。若校验失败，则弹出提示信息。这些逻辑应在查询按钮的点击事件中实现。

具体效果如下图所示。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

步骤阅读

若校验未通过，界面将弹出错误警告提示。

二、打开模板

打开模板文件：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Parameter\TimeScale\TimeScale.cpt。

打开后的参数界面如下图所示。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

三、增加事件

为查询按钮添加“点击”事件，具体的JS代码如下：


var start = this.options.form.getWidgetByName("starttime").getValue(); 
var end = this.options.form.getWidgetByName("endtime").getValue(); 
if( start == "" || start==null){ //判断开始日期是否为空
 alert("错误,开始时间不能为空"); //开始日期参数为空时提示
 return false; 
}; 
if(end == "" || end==null){ //判断结束日期是否为空
 alert("错误,结束时间不能为空"); //结束日期参数为空时提示
 return false; 
}; 
if( start > end){ //判断开始日期是否大于结束日期
 alert("错误,开始时间不能大于结束时间"); //开始日期大于结束日期时提示 
 return false; 
}
var startdate = new Date(start); //将开始日期转化为Date型
var enddate = new Date(end); //将结束日期转化成Date型
var subdate = (enddate-startdate)/ (1000 *60 *60 *24); //将两个日期相减得出的毫秒数转化为天数
if(subdate>15){ //判断结束日期是否超过开始日期后15天
alert("错误,结束日期必须在开始日期15天之内"); //结束日期超过开始日期后的十五天时提示
return false;
}

注意：虽然参数控件本身支持校验，但需点击控件才能触发。因此，参数界面的非空校验和比较校验建议在查询按钮中统一设置，以确保用户体验一致。

四、效果验证

在分页预览模式下，选择开始时间和结束时间。若两个日期之间的差值超过15天，系统将弹出上述警告对话框。

注意：上述JS代码在Firefox、Chrome及IE9及以上浏览器中运行正常。但在IE8及更低版本浏览器中，日期差值判断的警告框可能无效。可使用以下兼容代码替代：


var start = this.options.form.getWidgetByName("starttime").getValue(); 
var end = this.options.form.getWidgetByName("endtime").getValue(); 
if( start == "" || start==null){ //判断开始日期是否为空 
 alert("错误,开始时间不能为空"); //开始日期参数为空时提示 
 return false; 
}; 
if(end == "" || end==null){ //判断结束日期是否为空 
 alert("错误,结束时间不能为空"); //结束日期参数为空时提示 
 return false; 
}; 
if( start > end){ //判断开始日期是否大于结束日期 
 alert("错误,开始时间不能大于结束时间"); //开始日期大于结束日期时提示 
 return false; 
} 
var aDate = start.split("-") 
var startdate = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //转换为MM-dd-yyyy格式 
alert(startdate);
var aDate = end.split("-") 
var enddate = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) 
alert(enddate);
var subdate= ((enddate - startdate) /1000/ 60/60/24) //把相差的毫秒数转换为天数 
alert(subdate);
if(subdate>15){ //判断结束日期是否超过开始日期后15天 
alert("错误,结束日期必须在开始日期15天之内"); //结束日期超过开始日期后的十五天时提示 
return false; 
}

清空（重置）条件操作

一、问题描述

在报表参数设计中，有时需要快速重置单个控件的内容，或者一键重置所有控件的内容，以提升操作便捷性。具体效果如下图所示。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

二、解决方案

若只需重置单个控件，可在JS事件中获取该控件对象，并调用reset()方法，从而清空该控件的内容。

若需重置所有控件，可通过form.name_widgets获取参数界面上所有控件，遍历每个控件并执行重置操作。具体代码如下：


$.each(this.options.form.name_widgets,function(i,item){ 
 if (item.options.type !=='label') {item.setValue();item.setText();} 
});;

三、重置单个控件内容的按钮配置

以图中“清空供应商”按钮为例，演示如何重置单个控件内容。

在参数设计页面新建一个按钮控件，命名为“清空供应商”，并设置其“点击”事件。该事件将清空供应商（supplierID）控件的内容，具体JS代码如下：


var supplierID = this.options.form.getWidgetByName("supplierID"); //获取supplierID控件
supplierID.reset(); //将supplierID控件内容清空

四、重置所有控件内容在参数界面新建一个按钮控件，命名为“清空全部”，并设置其“点击”事件。该事件的JS脚本如下：


$.each(this.options.form.name_widgets,function(i,item){ 
 if (item.options.type !=='label') {item.setValue();item.setText();} 
});;

隐藏参数界面向上/向下三角按钮

一、问题描述

在预览带有参数面板的模板时，参数界面与主体界面交接处通常显示一个三角按钮。有时我们需要隐藏该按钮以优化界面美观度，具体方法如下。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

二、解决思路

在模板加载完成后，获取该三角按钮的DOM元素，然后设置其隐藏（hide）或直接移除（remove）。

隐藏按钮


$('.parameter-container-collapseimg-up').hide();

移除按钮


$('.parameter-container-collapseimg-up').remove();

三、示例操作

以GettingStarted.cpt模板为例，演示如何在模板加载时自动隐藏参数界面的三角按钮。

打开设计器，双击该模板进入参数面板编辑界面。单击参数面板空白处选中面板，添加一个“初始化后”事件，操作界面如下图所示。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

四、JS代码实现


setTimeout(function() {
 $('.parameter-container-collapseimg-up').hide();
}, 10);

五、效果验证

保存模板并点击预览，即可看到三角按钮不再显示，具体效果如下图所示。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

参数控件动态赋值

一、概述

在参数界面中，常需在一个控件中动态控制其他控件的值。例如，当username控件有值时，state控件自动变为1；否则变为2。具体效果如下图所示。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

二、解决方案

通过JS脚本获取目标控件，读取其值或为其赋值。

注意：不能给控件置数为0，因为在JS中0会被解析为false。此外，一个控件无法直接对另一个控件的显示值进行置数操作。

三、参数界面配置

具体参数界面如下图所示。

username控件类型为下拉框，数据自定义，实际值和显示值均为：jerny，anna，merry。

state控件类型选择单选按钮组，数据同样为自定义，实际值和显示值均为：1，2。

FineReport参数面板JS高级应用：联动显示、日期校验与重置技巧

四、JS事件配置

在username控件的事件编辑中添加“编辑后”事件，JS代码如下：


var state= this.options.form.getWidgetByName("state");
var username = this.options.form.getWidgetByName("username").getValue();
if (!username){
state.setValue(2);
}else{
state.setValue(1);
}

该段代码用于对state参数进行动态置数。当username为空时，!username为真，此时将state置数为2；否则，当username有值时，将state置数为1。

作者最新文章

JS空字符串、null和undefined转数字的结果是什么

2026-11-05 14:49:16

CodePen、JSFiddle与StackBlitz：主流JS在线编辑器对比

2026-11-05 13:38:29

JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间

2026-11-05 12:55:14

JavaScript将儒略日逆向还原为公历日期时间的实现方法

2026-11-04 23:51:05

能在我的世界手机版直接修改JS代码吗

2026-11-04 19:02:53