历史版本10 :JS实现自定义按钮快速给参数赋指定范围值 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

平时我们接触的很多项目,可能都会需要制作相关的周报、月报、、季报、年报等表样。像这样的报表,选择适当的参数(时间)范围就显得尤其重要了。但如果每次都手动去选择又觉得太过麻烦。现在我来介绍一种快速定位法,只需点击某个按钮,就能准确定位到合适的时间范围!如图:

效果一:根据系统时间获取周报、月报、季报、年报范围值

222

效果二:根据自定义日期值获取周报、月报、季报、年报范围值

222

2. 思路编辑

通过在参数栏添加按钮,在按钮上添加JavaScript点击事件给指定参数赋值的方法来实现!

3. 操作步骤:示例(一)编辑

3.1 报表样式

1)新建一个工作簿,添加模板参数start_timeend_time

222

2)在B1B2单元格分别插入公式:$start_time$end_time,报表样式如下:

222

3.2 日期控件设置

1)切换至参数面板,添加两个标签控件,控件值分别为:开始时间:结束时间:

222

2)添加两个日期控件,控件名称分别为:start_timeend_time

222
222

3.3 按钮控件设置

1)添加一个按钮控件,按钮名称为本周

222

2)给按钮控件添加点击事件

222


【本周】按钮点击事件js代码如下:

//获取当前日期所在周的第一天 var K1='${=dateInWeek(TODATE(),1)}'; //获取当前日期所在周的最后一天 var K2='${=dateInWeek(TODATE(),-1)}'; //获取控件(开始时间) var state1= this.options.form.getWidgetByName("start_time"); //获取控件(结束时间) var state2= this.options.form.getWidgetByName("end_time"); //给控件(开始时间)赋值 state1.setValue(K1); //给控件(结束时间)赋值 state2.setValue(K2);

3)同理添加【本月】、【本季】、【本年】按钮,并添加点击事件

【本月】按钮点击事件js代码如下:

//获取当前日期所在月份的第一天 var K1='${=DATEINMONTH(TODATE(),1)}'; //获取当前日期所在月份的最后一天 var K2='${=DATEINMONTH(TODATE(),-1)}'; //获取控件(开始时间) var state1= this.options.form.getWidgetByName("start_time"); //获取控件(结束时间) var state2= this.options.form.getWidgetByName("end_time"); //给控件(开始时间)赋值 state1.setValue(K1); //给控件(结束时间)赋值 state2.setValue(K2);

【本季】按钮点击事件js代码如下:

//获取当前日期所在季度的第一天 var K1='${=dateINQUARTER(TODATE(),1)}'; //获取当前日期所在季度的最后一天 var K2='${=dateINQUARTER(TODATE(),-1)}'; //获取控件(开始时间) var state1= this.options.form.getWidgetByName("start_time"); //获取控件(结束时间) var state2= this.options.form.getWidgetByName("end_time"); //给控件(开始时间)赋值 state1.setValue(K1); //给控件(结束时间)赋值 state2.setValue(K2);

【本年】按钮点击事件js代码如下:

//获取当前日期所在年份的第一天 var K1='${=DATEINYEAR(TODATE(),1)}'; //获取当前日期所在年份的最后一天 var K2='${=DATEINYEAR(TODATE(),-1)}'; //获取控件(开始时间) var state1= this.options.form.getWidgetByName("start_time"); //获取控件(结束时间) var state2= this.options.form.getWidgetByName("end_time"); //给控件(开始时间)赋值 state1.setValue(K1); //给控件(结束时间)赋值 state2.setValue(K2);

4)最后添加查询按钮,完成效果如下:

222

保存预览,效果如图一所示。

4. 操作步骤:示例(二)编辑

4.1 日期控件设置

1)切换至参数面板,新建三个日期控件,控件名分别为:RQB_TIMEE_TIME

222
2)将日期控件RQ的返回类型设置成:字符串

222

注:日期控件格式设为:yyyy-MM-dd。

4.2 按钮控件设置

再添加4个按钮控件,并给控件添加点击事件,以【周报】按钮为例:

222

【周报】JavaScript脚本:

//获取到RQ控件值,并赋值给参数RQ var RQ=this.options.form.getWidgetByName("RQ").getValue(); //获取参数RQ所在周的第一天,并赋值给参数s var s=FR.remoteEvaluate('FORMAT(DATEINWEEK("'+RQ+'",1),"yyyy-MM-dd")'); //获取参数RQ所在周的最后一天,并赋值给参数e var e=FR.remoteEvaluate('FORMAT(DATEINWEEK("'+RQ+'",-1),"yyyy-MM-dd")'); //给控件B_TIME赋值 this.options.form.getWidgetByName("B_TIME").setValue(s); //给控件E_TIME赋值 this.options.form.getWidgetByName("E_TIME").setValue(e);

【月报】JavaScript脚本:

var RQ=this.options.form.getWidgetByName("RQ").getValue(); var s=FR.remoteEvaluate('FORMAT(DATEINMONTH("'+RQ+'",1),"yyyy-MM-dd")'); var e=FR.remoteEvaluate('FORMAT(DATEINMONTH("'+RQ+'",-1),"yyyy-MM-dd")'); this.options.form.getWidgetByName("B_TIME").setValue(s); this.options.form.getWidgetByName("E_TIME").setValue(e);

【季报】JavaScript脚本:

var RQ=this.options.form.getWidgetByName("RQ").getValue(); var s=FR.remoteEvaluate('FORMAT(DATEINQUARTER("'+RQ+'",1),"yyyy-MM-dd")'); var e=FR.remoteEvaluate('FORMAT(DATEINQUARTER("'+RQ+'",-1),"yyyy-MM-dd")'); this.options.form.getWidgetByName("B_TIME").setValue(s); this.options.form.getWidgetByName("E_TIME").setValue(e);

【年报】JavaScript脚本:

var RQ=this.options.form.getWidgetByName("RQ").getValue(); var s=FR.remoteEvaluate('FORMAT(DATEINYEAR("'+RQ+'",1),"yyyy-MM-dd")'); var e=FR.remoteEvaluate('FORMAT(DATEINYEAR("'+RQ+'",-1),"yyyy-MM-dd")'); this.options.form.getWidgetByName("B_TIME").setValue(s); this.options.form.getWidgetByName("E_TIME").setValue(e);

最后添加查询按钮,完成效果如下:

222

保存预览,效果如图二所示。

5. 预览效果编辑

5.1 PC端预览效果

1)示例一:根据系统时间获取周报、月报、季报、年报范围值

222

2)示例二:根据自定义日期值获取周报、月报、季报、年报范围值

222

5.2 移动端预览效果

1)示例一:根据系统时间获取周报、月报、季报、年报范围值

APP预览效果:

222

H5预览效果:
222

2)示例二:根据自定义日期值获取周报、月报、季报、年报范围值

APP预览效果:

注:不支持APP。

H5预览效果:

222

6. 已完成模板编辑

1)示例一
已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\参数界面JS实例\12-JS实现自定义按钮快速给参数赋指定范围值-示例一.cpt

2)示例二

已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\参数界面JS实例\12-JS实现自定义按钮快速给参数赋指定范围值-示例二.cpt