1. 概述编辑
1.1 应用场景
报表中添加日期查询控件,可以查询指定日期区间内的报表数据。
1.2 功能介绍
目前日期控件有两种查询格式,分别为:
1)日期型:用户可以在年月日的范围内定义查询日期格式。
2)时间型:用户可以在年月日时分秒范围内定义查询日期格式。
2. 控件介绍编辑
2.1 操作方法
报表设计时,进入参数面板编辑界面,将上方的日期控件拖动到参数面板中。
2.2 属性设置
选中日期控件后,可在右下方设置日期控件的属性。
每个属性介绍如下:
控件名称:通常与参数结合使用,通过控件名可以获得该控件,从而获得控件值传递给对应参数;或者通过控件名获得控件后通过 JS 设置控件的属性。
注:若模板中参数名称和控件名称相同,点击日期控件选择日期后,会立即传递参数,实现联动效果。
可用:勾选后,模板中正常使用该控件;不勾选,控件灰化,不可点击选择日期。
可见:勾选后,控件可见;不勾选,控件不可见。
标签名称:标签名称的作用就是用来弥补参数界面中标签控件不支持的问题。
控件值:设定日期控件的默认显示值,有日期、公式、字段这三种格式。
格式:日期控件的查询格式,功能介绍中有提及。
起始日期:查询时输入的时间不能小于起始日期。
结束日期:查询时输入的时间不能大于结束日期。
水印:自定义水印内容。
字体大小:日期字体大小
返回值类型:需要跟数据库表中日期字段的类型匹配,有日期和字符串这两种。
校验:勾选允许为空,则查询时日期控件内容可以为空。勾选允许直接编辑,则查询时允许手动输入日期。
注1:起始日期和结束日期可以使用公式传递参数和单元格。
注2:设定了起始日期和结束日期后,不在范围内的数据将变成灰色不可选取状态。
3. 示例编辑
下面使用日期控件实现日期区间查询效果。
3.1 数据准备
新建数据集 ds1,输入如下 SQL 查询语句:
SELECT * FROM 订单 where 1=1
${if(len(starttime)=0,""," and 订购日期>='"+starttime+"'")}
${if(len(endtime)=0,""," and 订购日期<='"+endtime+"'")}
查询语句中新建了两个数据集参数:starttime 和 endtime,分别作为查询区间的头部参数和尾部参数。
3.2 报表设计
1)如下图设计报表样式,订购日期格式改为日期型,应付金额格式改为数字保留小数点后两位。
2)进入参数面板编辑界面,将参数 starttime 和 endtime 添加到参数面板,绑定日期控件。
3)设置日期区间开始日期的属性,选中 starttime 参数对应的日期控件,属性设置如下图所示:
控件值插入公式:monthdelta($endtime,-1),表示结束日期显示值后推一个月最作为开始日期的默认显示值。
结束日期插入公式:$endtime,表示选取日期区间开始日期时不能超过日期区间结束日期。
4)设置日期区间结束日期的属性,选中 endtime 参数对应的日期控件,属性设置如下图所示:
控件值插入公式:today(),表示以今天作为结束日期的默认显示值。
3.3 效果预览
1)PC 端:
保存报表,点击分页预览,效果如下图所示:
2)移动端
App 及 HTML5 端效果如下图所示:
4. 模板下载编辑
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\日期控件.cpt
点击下载模板:日期控件.cpt
5. 注意事项编辑
5.1 日期控件星期切换
在 Web 端使用日期控件的时候,由于国内外对于一个星期的周期的差异化认识,会带来一些误操作,国外普遍认为一个星期从周日开始,国内普遍认为一个星期从周一开始,为了迎合国内外对于日期控件的习惯需求,FineReport 提供了日期控件星期切换的功能,在 Web 端选择日期控件的时候,点击
即可将周一排在一个星期的第一天,点击 即可将周日排在一个星期的第一天,如下图所示:点击模板中的日期控件,选择日期后立即传递参数,实现联动效果,但部分用户希望不立即传递参数。如下图所示:
解决方案:
注:该解决方案不适用移动端。
增加一个日期控件,用来中转。
1)打开示例模板 test.frm ,添加日期控件,为其添加编辑结束事件。如下图所示:
JavaScript 代码如下所示:
var dateWidget=this.options.form.getWidgetByName("date");
dateWidget.setValue(this.getValue(),false)
dateWidget.fireEvent(FR.Events.AFTEREDIT);
2)选中date控件,取消勾选可见按钮。如下图所示:
3)点击表单预览,如下图所示:
4)已完成模板下载请点击:test1.frm
5.3 移动端不支持直接编辑
勾选了允许直接编辑,移动端预览时不支持直接编辑日期控件,如下图所示: