JS实现自定义按钮快速给参数赋指定范围值

于 2019-03-28 16:12:08 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： 帆软 文章标签： 帆软

JS实现自定义按钮快速给参数赋指定范围值

 

目录:

1. 描述编辑

 

 

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

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

222

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

222
 

 

2. 思路编辑

 

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

 

3. 操作步骤：示例（一）编辑

 

3.1 报表样式

 

1）新建一个工作簿，添加模板参数start_time和end_time：

222

2）在B1、B2单元格分别插入公式：$start_time、$end_time，报表样式如下：

222

 

3.2 日期控件设置

 

1）切换至参数面板，添加两个标签控件，控件值分别为：开始时间：、结束时间：：

222

2）添加两个日期控件，控件名称分别为：start_time、end_time：

222
222

 

3.3 按钮控件设置

 

1）添加一个按钮控件，按钮名称为本周：

222

2）给按钮控件添加点击事件：

222


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

 

 

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

3）同理添加【本月】、【本季】、【本年】按钮，并添加点击事件。

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

 

 

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

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

 

 

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

 

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

 

 

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

4）最后添加查询按钮，完成效果如下：

222

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

 

4. 操作步骤：示例（二）编辑

 

 

4.1 日期控件设置

 

1）切换至参数面板，新建三个日期控件，控件名分别为：RQ、B_TIME、E_TIME：

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

222

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

 

4.2 按钮控件设置

 

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

222

【周报】JavaScript脚本：

 

 

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

【月报】JavaScript脚本：

 

 

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

【季报】JavaScript脚本：

 

 

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

【年报】JavaScript脚本：

 

 

  1. var RQ=this.options.form.getWidgetByName("RQ").getValue();  
  2. var s=FR.remoteEvaluate('FORMAT(DATEINYEAR("'+RQ+'",1),"yyyy-MM-dd")');  
  3. var e=FR.remoteEvaluate('FORMAT(DATEINYEAR("'+RQ+'",-1),"yyyy-MM-dd")');  
  4. this.options.form.getWidgetByName("B_TIME").setValue(s);  
  5. 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）示例一

模板效果在线查看请点击：JS实现自定义按钮快速给参数赋指定范围值-示例一.cpt

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

点击下载模板

2）示例二

模板效果在线查看请点击：JS实现自定义按钮快速给参数赋指定范围值-示例二.cpt

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

点击下载模板

 

主题： 二次开发

hzp666
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值