web报表开发FineReport：[13]动态显示

1、实现思路

通过控件的

visible()  

、

invisible()  

属性控制其可见与不可见：

var Widget = form.getWidgetByName("[ParaName]"); //通过控件名获取控件  

Widget.visible(); //设置该控件可见   

Widget.invisible(); //设置该控件不可见  

2、打开模板

打开模板：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Parameter\DynamicSQL\DynamicSQL.cpt。

3、修改数据集

将数据集修改为：SELECT * FROM 订单 where 1=1 ${if(type=="日报","and date(订购日期) = '" + date + "'",if(type=="月报","and strftime('%m',订单.订购日期) = "+ month + " and strftime('%Y',订单.订购日期) = " + year ,"and strftime('%Y',订单.订购日期) = " + year ))}

给参数type设置默认值为日报，参数date设置默认值的类型为字符串型值为2010-01-03。

4、表样修改

将表样修改成如下样式：

给A3设置形态，自定义数据，实际值与对应的显示值分别为：日报，日期；月报，年月；年报，年份。

在B3单元格中增加如下公式：=if(type=="日报",$date,if(type=="月报",$year+"."+$month,$year))

5、 参数界面设置

将参数界面设置成如下样式：

设置参数type的控件类型为下拉框，数据字典选择自定义，实际值与显示值都为日报，月报，年报。

设置参数year的控件类型为下拉框，数据字典选择自定义，显示值与实际值都为2010，2011。

设置参数month的控件类型也为下拉框，数据字典选择公式，在实际值出填写公式=range(1,6)即可。

设置参数date的控件类型为日期，返回值类型为默认的字符串型。

6、动态显示参数控件JS事件设置

给参数type的下拉框控件增加编辑后事件，具体的JS代码如下：

点击参数type的下拉框控件，在属性表的下方选择事件面板，点击增加编辑后事件，具体的js如下：

var form = this.options.form;  

var p2Widget = form.getWidgetByName("date");  

var p3Widget = form.getWidgetByName("year");  

var p4Widget = form.getWidgetByName("month");  

var value = this.getValue();  //获取当前参数即type参数的值  

if (value == "日报") {         

   p2Widget.visible();  

   p3Widget.invisible();  

   p4Widget.invisible();  

} else if (value == "月报") {  

   p2Widget.invisible();  

   p3Widget.visible();  

   p4Widget.visible();  

} else if(value == "年报"){  

   p2Widget.invisible();  

   p3Widget.visible();  

   p4Widget.invisible();  

}else {  

   p2Widget.invisible();  

   p3Widget.invisible();  

   p4Widget.invisible();  

}  

注：此段代码判断type参数的值，若是日报，则只显示date控件，若是月报，则显示year和month控件，若是年报，则只显示year控件。

7、保存模板

点击分页预览，效果如上图。在线查看模板效果请点击DynamicParaWidget.cpt

已完成模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Parameter\DynamicParaWidget.cpt。