反饋已提交
網絡繁忙
参数查询时,可以对控件值做一些简单校验,如不能为空,当需要一些复杂校验时,设计器自带的校验规则就无法满足了。例如有两个参数:开始日期和结束日期,校验规则为:
1)开始日期与结束日期不能为空,结束日期必须在开始日期之后
2)结束日期必须在开始日期后的某个时间段内,否则给出提示
效果如下图所示,这该如何实现呢?
通过给「查询按钮」控件添加 JS 实现。利用 this.options.form.getWidgetByName("starttime").getValue() 获取到两个日期控件的值,然后对获取的日期值进行校验。
准备内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Parameter\TimeScale\TimeScale.cpt
点击可下载模板:TimeScale.cpt
模板参数界面如下图所示:
点击「查询按钮」,为其添加一个「点击」事件,如下图所示:
JavaScript 代码如下:
注:虽然参数控件中也可以设置校验,但是参数控件要点击控件后才能进行校验,因此参数界面的不能为空以及比较校验需要在查询按钮中设置。
var start = this.options.form.getWidgetByName("starttime").getValue(); var end = this.options.form.getWidgetByName("endtime").getValue(); if( start == "" || start==null){ //判断开始日期是否为空 alert("错误,开始时间不能为空"); //开始日期参数为空时提示 return false; }; if(end == "" || end==null){ //判断结束日期是否为空 alert("错误,结束时间不能为空"); //结束日期参数为空时提示 return false; }; if( start > end){ //判断开始日期是否大于结束日期 alert("错误,开始时间不能大于结束时间"); //开始日期大于结束日期时提示 return false; }var startdate = new Date(start); //将开始日期转化为Date型var enddate = new Date(end); //将结束日期转化成Date型var subdate = (enddate-startdate)/ (1000 *60 *60 *24); //将两个日期相减得出的毫秒数转化为天数if(subdate>15){ //判断结束日期是否超过开始日期后15天alert("错误,结束日期必须在开始日期15天之内"); //结束日期超过开始日期后的十五天时提示return false;}
在 IE8 及以下的 IE 浏览器使用时,若判断两个日期之间的差值的警告框不起作用。可用以下代码:
var start = this.options.form.getWidgetByName("starttime").getValue(); var end = this.options.form.getWidgetByName("endtime").getValue(); if( start == "" || start==null){ //判断开始日期是否为空 alert("错误,开始时间不能为空"); //开始日期参数为空时提示 return false; }; if(end == "" || end==null){ //判断结束日期是否为空 alert("错误,结束时间不能为空"); //结束日期参数为空时提示 return false; }; if( start > end){ //判断开始日期是否大于结束日期 alert("错误,开始时间不能大于结束时间"); //开始日期大于结束日期时提示 return false; } var aDate = start.split("-") var startdate = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //转换为MM-dd-yyyy格式 alert(startdate);var aDate = end.split("-") var enddate = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) alert(enddate);var subdate= ((enddate - startdate) /1000/ 60/60/24) //把相差的毫秒数转换为天数 alert(subdate);if(subdate>15){ //判断结束日期是否超过开始日期后15天 alert("错误,结束日期必须在开始日期15天之内"); //结束日期超过开始日期后的十五天时提示 return false; }
移动端 JavaScript 代码如下:
var start = this.options.form.getWidgetByName("starttime").getValue();var end = this.options.form.getWidgetByName("endtime").getValue();var startdate = new Date(start); //将开始日期转化为Date型var enddate = new Date(end); //将结束日期转化成Date型var subdate = (enddate - startdate) / (1000 * 60 * 60 * 24); //将两个日期相减得出的毫秒数转化为天数if(start == "" || start == null) { //判断开始日期是否为空 alert("错误,开始时间不能为空");} else if(end == "" || end == null) { //判断结束日期是否为空 alert("错误,结束时间不能为空");} else if(start > end) { //判断开始日期是否大于结束日期 alert("错误,开始时间不能大于结束时间");} else if(subdate > 15) { //判断结束日期是否超过开始日期后15天 alert("错误,结束日期必须在开始日期15天之内");} else { _g().parameterCommit();}
保存模板,点击「分页预览」,选择开始时间和结束时间,使这两个日期之间相差超过 15 天,就会弹出校验对话框。如下图所示:
1)PC 端
2)移动端
若为单元格天百控件,也可以使用此方法进行校验。效果如下图所示:
新建模板,在单元格中添加「日期控件」,设置控件名为 starttime、endtime,格式改为时间型,并添加一个按钮控件。如下图所示:
点击「按钮控件」,为其添加一个「点击」事件,如下图所示:
相比较参数面板中「按钮控件」的JS,只需要将 this.options.form.getWidgetByName("starttime") 修改为contentPane.getWidgetByName("starttime") 。
var start = contentPane.getWidgetByName("starttime").getValue();var end = contentPane.getWidgetByName("endtime").getValue();if (start == "" || start == null) { //判断开始日期是否为空alert("错误,开始时间不能为空"); //开始日期参数为空时提示return false;};if (end == "" || end == null) { //判断结束日期是否为空alert("错误,结束时间不能为空"); //结束日期参数为空时提示return false;};if (start > end) { //判断开始日期是否大于结束日期alert("错误,开始时间不能大于结束时间"); //开始日期大于结束日期时提示 return false;}var startdate = new Date(start); //将开始日期转化为Date型var enddate = new Date(end); //将结束日期转化成Date型var subdate = (enddate - startdate) / (1000 * 60 * 60 * 24); //将两个日期相减得出的毫秒数转化为天数if (subdate > 15) { //判断结束日期是否超过开始日期后15天alert("错误,结束日期必须在开始日期15天之内"); //结束日期超过开始日期后的十五天时提示return false;}
保存模板,点击「填报预览」,效果如下图所示:
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\18-JS实现日期控件校验.cpt
点击下载模板:18-JS实现日期控件校验.cpt
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉