1. 概述编辑
1.1 应用场景
报表中添加日期查询控件,可以查询指定日期区间内的报表数据。
1.2 功能介绍
目前日期控件有两种查询格式,分别为:
1)日期型:用户可以在年月日的范围内定义查询日期格式。
2)时间型:用户可以在年月日时分秒范围内定义查询日期格式。
2. 控件介绍编辑
2.1 操作方法
报表设计时,进入参数面板编辑界面,将上方的日期控件拖动到参数面板中。
2.2 属性设置
选中日期控件后,可在右下方设置日期控件的属性。
每个属性介绍如下:
1)控件值:设定日期控件的默认显示值,有日期、公式、字段这三种格式。
2)格式:日期控件的查询格式,功能介绍中有提及。
3)起始日期:查询时输入的时间不能小于起始日期。
4)结束日期:查询时输入的时间不能大于结束日期。
5)水印:自定义水印内容。
6)字体大小:日期字体大小
7)返回值类型:需要跟数据库表中日期字段的类型匹配,有日期和字符串这两种。
8)校验:勾选允许为空,则查询时日期控件内容可以为空。勾选允许直接编辑,则查询时允许手动输入日期。
注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