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

编辑
  • 文档创建者:zsh331
  • 浏览次数:5963次
  • 编辑次数:13次
  • 最近更新:Kevin-s 于 2019-06-21
  • 1. 描述

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

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

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




    2. 思路

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


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

    3.1 报表样式

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

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



    3.2 日期控件设置

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


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




    3.3 按钮控件设置

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


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


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

    //获取当前日期所在周的第一天
    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)同理添加【本月】、【本季】、【本年】按钮,并添加点击事件

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

    //获取当前日期所在月份的第一天


    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);

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


    //获取当前日期所在季度的第一天 
    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);


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


    //获取当前日期所在年份的第一天
    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)最后添加查询按钮,完成效果如下:


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


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

    4.1 日期控件设置

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


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


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


    4.2 按钮控件设置

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



    【周报】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);

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


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


    5. 预览效果

    5.1 PC 端预览效果


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


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



    5.2 移动端预览效果

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

    App 预览效果:


    H5 预览效果:

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

    App 预览效果:

    注:不支持 App。

    H5 预览效果:



    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

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]