Web报表工具-专业博客

FineReport报表工具内置JS的使用之五

FineReport——报表技术领跑者 — Sat, 04 Sep 2010 08:20:20 +0000

文章转自：http://ajavareport.cn/archives/450

参数控件动态显示

在使用FineReport报表工具时，由于业务的需要，很多情况下需要当满足某个条件时，某些查询条件才显示出来，此时参数控件就需要动态的控制其是否可见。

//通过控件的visible()、invisible()属性控制其可视、不可视

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

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

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

实例：

该实例实现效果：当选择日报时，右侧出现一个日期查询控件，选择月报时，则让用户选择年月，例如2008年3月，选择年报时，即让用户选择年份。

1. 模板设计

1.1 新建报表

1.2 添加数据源

新建一个名为ds1的数据库查询，SQL语句：

SELECT equipment,amount,costs,updatetime,equipmentId

FROM EquipmentDetail

where 1=1

${if(type=’日报’,” and format(updatetime,’yyyy-mm-dd’) = ‘” + date + “‘”,”")}

${if(type=’月报’,” and month(updatetime) = “+ month + ” and year(updatetime) = ” + year,”")}

${if(type=’年报’,” and year(updatetime) = ” + year,”")}

其中设置参数type的默认值日报，data的默认值是字符串2009-01-13

1.3 模板设计

模板样式如下

2.4 绑定数据列

按照下表进行数据列绑定

2.5 参数设计

2.5.1 打开参数设计界面，参数界面布局如下

2.5.2 控件设置

l type控件设置

右击type控件，选择控件设置，打开控件设置面板，控件类型为下拉框，控件名选择type，自定义数据，如下图所示

l date控件设置

右击date的控件，选择控件设置，打开控件设置面板，控件类型为日期，控件名选择date，自定义数据，如下图所示

l year控件设置

右击year的控件，选择控件设置，打开控件设置面板，控件类型为下拉框，控件名选择year，使用公式，dyear控件是由type的类型来决定他是否需要显示的，且我们默认的类型为日报，因此默认设置它为不可见，如下图所示

l month控件设置

右击month的控件，选择控件设置，打开控件设置面板，控件类型为下拉框，控件名选择month，自定义数据，并设为不可见，如下图所示

2. 事件编辑

右击type控件，选择控件设置，打开控件设置面板，添加编辑后事件，如下图所示：

在function fun(){}中添加如下代码：

var form = this.options.form;

var DateWidget = form.getWidgetByName(“date”);

var YearWidget = form.getWidgetByName(“year”);

var MonthWidget = form.getWidgetByName(“month”);

var value = this.getValue();

if(value == “日报”){

DateWidget.visible();

YearWidget.invisible();

MonthWidget.invisible();

}else if(value == “月报”){

DateWidget.invisible();

YearWidget.visible();

MonthWidget.visible();

}else if(value == “年报”){

DateWidget.invisible();

YearWidget.visible();

MonthWidget.invisible();

}else{

DateWidget.invisible();

YearWidget.invisible();

MonthWidget.invisible();

}

说明：此段代码的作用是选择日报，那么在其下方出现一个日期选择框；选择月报时，即让用户选择年月，例如2008年3月；年报与月报同理，即让用户选择年份。

3. 保存并预览

默认为日报，只显示出日期控件，预览效果如图

当选择月报时，右边弹出月份和年份下拉框，预览效果如图

当选择年报时，右边弹出年份下拉框，预览效果如图

Web报表主题相关文章：

FineReport报表工具内置JS的使用之四

FineReport——报表技术领跑者 — Wed, 01 Sep 2010 13:55:06 +0000

文章转自：http://ajavareport.cn/archives/444

参数校验-日期校验

在使用FineReport报表工具时，内置参数查询界面当中可进行一些数据校验，例如有两个参数：开始时间和结束时间，结束时间必须在开始时间之后，否则进行提示。

1. 在提交按钮的事件编辑中写JS代码

1.1 新建报表

1.2 模板设计

按照下图设计模板

1.3 添加数据源

新建一个名为ds1的数据库查询，SQL语句：SELECT * FROM EMPLOYEE

1.4 绑定数据列

按照下表进行数据列绑定

双击B5单元格，在过滤页面当中，定义条件类型为单元格，添加条件： BIRTHDATE 大于或等于 $begintime AND BIRTHDATE 小于 $endtime

1.5 定义参数

打开菜单栏中报表|报表参数，新定义两个个名为begintime,endtime的参数，如图

1.6 参数设计

l 打开参数设计界面，参数界面布局如下

l 日期控件设置

右击begintime的控件，选择控件设置，控件类型选择日期，控件名选择begintime，具体设置如下图所示

endtime的控件同上

1.7 数据校验

右击查询按钮，选择控件设置，打开控件设置面板，添加点击事件，如下图所示

在function fun(){}函数中写入如下JS语句：

var start = this.options.form.getWidgetByName(“begintime”).getValue();

var end = this.options.form.getWidgetByName(“endtime”).getValue();

if( start == “”){

alert(“错误,开始时间不能为空”);

return false;

};

if(end == “”){

alert(“错误,结束时间不能为空”);

return false;

};

if( start > end){

alert(“错误,开始时间不能大于结束时间”);

return false;

}

1.8 保存并预览

begintime输入为空，如下图所示

endtime输入为空，如下图所示

输入的endtime在begintime之前，校验如下图所示：

2. 在参数控件的事件编辑中写JS代码

2.1 设计模板

具体操作同上。

2.2 数据校验

l 右击begintime的控件，选择控件设置，添加编辑后事件，如下图所示：

在function fun(){}函数中写入如下JS语句：

var start = this.options.form.getWidgetByName(“begintime”).getValue();

if( start == “”){

alert(“错误,开始时间不能为空”);

return false;

};

说明：这段代码是为了验证begintime输入不能为空。

l 右击endtime的控件，选择控件设置，添加编辑后事件，如下图所示

在function fun(){}函数中写入如下Js语句：

var end = this.options.form.getWidgetByName(“endtime”).getValue();

if(end == “”){

alert(“错误,结束时间不能为空”);

return false;

};

if( start > end){

alert(“错误,开始时间不能大于结束时间”);

return false;

}

说明：这段代码是为了校验endtime输入不能为空以及结束时间大于开始时间。

2.3 保存并预览

效果与在提交按钮的事件编辑中写JS代码一样

Web报表主题相关文章：

FineReport报表工具内置JS的使用之三

FineReport——报表技术领跑者 — Tue, 24 Aug 2010 05:35:41 +0000

参数控件触发事件

参数控件的取值与置数

参数界面中，最常见的就是获取参数的值进行运算或者将其作为另一个参数的判断依据，在FineReport报表工具网页脚本中，也提供了获取参数控件实际值，显示值并给参数置数的方法。

//取当前控件的实际值

var [ParaValue] = this.getValue();

//通过参数控件名称来获取参数控件实际值

var [ParaValue] = this.options.form.getWidgetByName(“[ParaName]“).getValue();

//通过arguments[i]获取当前参数控件显示值

var [DisplayedValue] = arguments[0];

//通过控件A获取控件B的显示值

var [DisplayedValue] = this.options.form.getWidgetByName(“[ParaName]“).options.items[0].text;

//获取某个参数控件，并给其置数（实际值）

var [Para] = this.options.form.getWidgetByName(“[ParaName]“);

[Para].setValue([Value]);

实例：

该实例通过添加参数控件的编辑后事件来实现用一个参数控制另一个参数，如用参数username来对state置数，username为下拉框自定义的几个用户名，state为单选按钮组表示状态1和2。当username有值时，state的状态置为1否则置为2。

1. 模板设计

1.1 新建报表

1.2 定义参数

在菜单栏中选择报表|报表参数，打开参数定义面板，定义参数state和username，如下图

1.3 参数设计

打开参数设计界面，参数控件布局如下

l username控件类型为下拉框，数据自定义，如图

l state控件类型选择单选按钮组，数据也为自定义，如图

1.4 添加事件

在username的事件编辑中添加编辑后事件，JS代码如下

var state= this.options.form.getWidgetByName(“state”);

var username = this.options.form.getWidgetByName(“username”).getValue();

if (!username){

state.setValue(2);

}else{

state.setValue(1);

}

该段代码是用来对state参数置数，当username为空时，!username为真，此时将state置数为2,否则当username有值时，将state置数为1，如图所示

2. 保存并预览

点击设计器分页预览，当username有值时，state置为1

注意：state无法通过username置数为0，JS里面，state为0，默认返回false

且一个控件无法对另一个控件的显示值进行置数

Web报表主题相关文章：

FineReport报表工具内置JS的使用之二

FineReport——报表技术领跑者 — Tue, 24 Aug 2010 05:20:29 +0000

JavaScript概述

JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。即JavaScript源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器直接解释执行。

其他事件

使用FineReport报表工具时除了各控件中可以添加事件外，超级链接也可以引用JavaScript,具体使用方法将在之后的章节中详述。同时在报表|报表Web属性及服务器|服务器配置中也可以添加各种JS事件，如下图所示

超链接引用JavaScript

该例子实现用户在点击超级链接的时候，根据输入的页码，来决定链接到指定的页面。

有两种引用方式：

1. 将写好的方法保存为js文件，放置在工程下，在超级链接中直接调用

1.1 新建报表

1.2 模板设计

在B3单元格中写入公式：=range(1,40)，并将其扩张属性改为“从左到右扩展”，并将其设为居中，如下图所示：

1.3 添加超链接

l 右击B3单元格，选择超级链接，进入超级链接界面，点击添加JavaScript,如下图所示

l 写一段Js代码，内容为：

function demo() {

var test = function() {

var num = parseInt(arguments[0]);

contentPane.gotoPage(num);

};

var value = FR.Msg.prompt(“输入”, “页码”, 2, test);

}

说明：

var num = parseInt(arguments[0]); //获得输入框中输入的页码

contentPane.gotoPage(num); //跳转到相应页码

var value = FR.Msg.prompt(“输入”, “页码”, 2, test); //参数分别为对话框标题、对话框内容、输入框默认值、回调函数

将此段内容保存为test.js文件，放在WebReport目录下，在超级链接界面中插入该test.js，并在下面的function fun()函数中调用demo();

效果如下图所示：

1.4 保存并预览

点击超级链接，出现如下图所示的输入提示对话框

在输入对话框中输入需要跳转的页数，并点击确定按钮，就跳转到相应的页面。

2. 直接在超级链接界面上写js方法

2.1 新建报表

2.2 模板设计

在B3单元格中写入公式：=range(1,40)，并将其扩张属性改为“从左到右扩展”，并将其设为居中，如下图所示：

2.3 添加超链接

l 右击B3单元格，选择超级链接，进入超级链接界面，点击添加JavaScript，如下图所示

l function fun(){}函数中写入如下JS语句：

function test(){

var num = parseInt(arguments[0]);

_g(‘${sessionID}’).gotoPage(num);

};

var value = FR.Msg.prompt(“输入”, “页码”, 2,test);

说明：

_g(‘${sessionID}’).gotoPage(num); //跳转到相应页码

如下图所示

2.4保存预览

点击超级链接，出现如下图所示的输入提示对话框

在输入对话框中输入需要跳转的页数，并点击确定按钮，就会跳转到相应的页面。

Web报表主题相关文章：

FineReport报表工具内置JS的使用之一

FineReport——报表技术领跑者 — Sun, 22 Aug 2010 05:16:09 +0000

JavaScript概述

本章介绍了FineReport报表工具内置的JavaScript函数及其用法。

触发事件

控件的事件

在控件设置的事件编辑中，FineReport报表工具事件编辑共有七种触发事件：编辑前、编辑后、编辑结束、点击、初始化后、状态改变及回调。

其中编辑前、编辑结束只在表单填报时起作用。

编辑后、点击、初始化后、状态改变等在表单填报及参数界面上都可以使用。

1. 编辑前

该事件是在填报时进入编辑状态后被触发

简单例子

1.1 打开FineReport报表工具，新建一张空白报表，然后设计成如下格式

1.2 设置报表填报属性，在此不做赘述，具体设置方法可参考填报专题相关章节

1.3 定义单元格填报属性

将B2单元格控件类型设置为文本，并在B2控件中添加编辑前事件，在function fun()函数中添加一段JS代码： alert(“事件编辑前触发”);

如下图所示

1.4 保存并填报

点击设计器中的填报预览，进入填报的编辑状态，效果如下

此时当光标移至姓名单元格进行编辑时，编辑前事件被触发。

2. 编辑后

该事件在表单填报及参数界面上都可以被触发。

对于文本、数字控件，当输入任何字母或文字标点后触发；对于下拉框，复选框等控件，当选择下拉选项后被触发，具体设置方法类似于编辑前事件，在这不再赘述。

3. 编辑结束

该事件只有在填报确认单元格输入内容如键盘输入回车后才能被触发

具体设置方法类似于编辑前事件，在这不再赘述。

4. 点击

该事件是在点击按钮，或点击下拉框、下拉树、下拉复选框等之后被触发

简单例子

4.1 新建报表

4.2 使用默认的参数界面，如图

4.3 控件设置

右击按钮控件，选择控件设置，打开控件设置面板，添加点击事件，在function fun()函数中添加一段JS代码: alert(“点击我就触发该事件啦！”);

如下图所示

4.4 保存并预览

点击设计器中的分页预览，点击查询按钮，此时点击事件被触发，如下图

5. 初始化后

该事件是按钮控件所特有，在点击分页预览或填报预览后初始化界面时被触发

简单例子

5.1 新建报表

5.2 使用默认的参数界面，如图

5.3 控件设置

右击按钮控件，选择控件设置，打开控件设置面板，添加初始化后事件，在function fun()函数中添加一段JS代码: alert(“初始化后就触发该事件啦！”);

如下图所示

5.4 保存并预览

点击设计器中的分页预览，就可以看见如下图所示效果

6. 状态改变

该事件为单选按钮、复选框组控件所特有，在其状态改变时被触发

简单例子

6.1 定义报表参数p1，并设置其默认值为男

6.2 在参数界面上，定义参数p1的控件属性，如下图

6.3 添加事件

右击p1的控件，选择控件设置，打开控件设置面板，添加状态改变事件，在function fun()函数中添加一段JS代码: alert(“单选按钮的状态改变啦！”);

如下图所示

6.4 保存并预览

点击设计器中的分页预览，单选按钮默认选中“男”，当点击“女”时就会触发状态改变事件，如下图

7. 回调

该事件为文件控件所特有，是在上传完文件之后触发该事件

简单例子

7.1 新建报表，定义文件控件，如下图：

7.2 添加事件

点击文件控件，打开控件设置面板，添加回调事件，在function fun()函数中添加一段JS代码: alert(“回调事件触发啦！”);

如下图所示

7.3 保存并预览

点击设计器中的填报预览，上传文件结束后，触发回调事件，如下图

Web报表主题相关文章：

使用FineReport纯JAVA（web平台）报表软件事件编辑说明之七

FineReport——报表技术领跑者 — Wed, 18 Aug 2010 11:16:50 +0000

在空间设置的事件编辑中，事件编辑触发的事件共有七种，编辑前，编辑后，编辑结束，点击，初始化后，状态改变，回调

下面来介绍使用FineReport纯JAVA报表软件事件编辑其中的第七种：

1. 回调

该事件是类型为文件的控件的触发事件所特有，是在上传完文件之后触发该事件

l 简单例子

1.1新建报表

1.2定义参数

在菜单栏中选择报表|报表参数，打开参数定义面板，添加一个参数p1，默认值选择字符串形式，如下图

1.3参数设计界面，按照如下如所示

1.4控件设置

右击p1的控件，选择控件设置，打开控件设置面板，选择文件类型编辑器，具体设置如图，并在事件编辑中添加回调事件，在function fun（）函数中添加一段JS代码:alert(“回调事件触发啦！”)；如下图所示

1.5保存并预览

点击FineReport报表软件设计器中的分页预览，点击上传控件，出现如下效果

上传文件结束后，触发回调事件，如下

Web报表主题相关文章：

使用FineReport纯JAVA（web报表）事件编辑说明之六

FineReport——报表技术领跑者 — Sat, 14 Aug 2010 04:30:26 +0000

在空间设置的事件编辑中，事件编辑触发的事件共有七种，编辑前，编辑后，编辑结束，点击，初始化后，状态改变，回调

下面来介绍其中的第六种：

1. 状态改变

该事件是类型为复选框组的控件的触发事件所特有，在复选框组的状态改变时被触发

l 简单例子

1.1新建模板

1.2定义参数

在菜单栏中选择报表|报表参数，打开参数定义面板，添加一个参数p1，默认值选择字符串形式，如下图

1.3参数设计界面，按照如下如所示

1.4控件设置

右击p1的控件，选择控件设置，打开控件设置面板，选择复选框组类型编辑器，具体设置如图，并在事件编辑中添加状态改变事件，在function fun（）函数中添加一段JS代码:alert(“复选框组的状态改变啦！”)；如下图所示

1.5保存并预览

点击报表设计器中的分页预览，当复选框组的状态改变时，就可以看见如下图所示效果

Web报表主题相关文章：

使用FineReport纯JAVA（web报表）事件编辑说明之五

FineReport——报表技术领跑者 — Tue, 10 Aug 2010 10:15:07 +0000

在空间设置的事件编辑中，事件编辑触发的事件共有七种，编辑前，编辑后，编辑结束，点击，初始化后，状态改变，回调

下面来介绍其中的第五种：

1. 初始化后

该事件是类型为文件的控件的触发事件所特有，在点击页面预览或填报预览的初始化界面时被触发

l 简单例子

1.1新建报表

1.2使用默认的参数界面，如图

1.3控件设置

右击按钮的控件，选择控件设置，打开控件设置面板，选择文本类型编辑器，并在事件编辑中添加初始化后事件，在function fun（）函数中添加一段JS代码:alert(“初始化后就触发该事件啦！”)；如下图所示

1.4保存并预览

点击报表设计器中的分页预览，就可以看见如下图所示效果

Web报表主题相关文章：

使用FineReport纯JAVA（web报表）事件编辑说明之四

FineReport——报表技术领跑者 — Fri, 06 Aug 2010 05:03:03 +0000

在空间设置的事件编辑中，事件编辑触发的事件共有七种，编辑前，编辑后，编辑结束，点击，初始化后，状态改变，回调

下面来介绍其中的第四种：

1. 点击

该事件是在点击按钮之后被触发

l 简单例子

1.1新建报表

1.2使用默认的参数界面，如图

1.3控件设置

右击按钮的控件，选择控件设置，打开控件设置面板，选择文本类型编辑器，并在事件编辑中添加点击事件，在function fun（）函数中添加一段JS代码:alert(“点击我就触发该事件啦！”)；如下图所示

1.4保存并预览

点击设计器中的分页预览，点击查询按钮，此时编辑后事件被触发，如下图

Web报表主题相关文章：

使用FineReport纯JAVA（web报表）事件编辑说明之三

FineReport——报表技术领跑者 — Tue, 03 Aug 2010 11:09:28 +0000

在空间设置的事件编辑中，事件编辑触发的事件共有七种，编辑前，编辑后，编辑结束，点击，初始化后，状态改变，回调

下面来介绍其中的第三种：

1编辑结束

该事件只有在填报键盘输入回车后才能被触发

l 简单例子

1.1新建一张空白报表，然后设计成如下格式

1.2设置报表填报属性，如图

1.3定义单元格填报属性

将C2单元格控件类型设置为文本，并在事件编辑中添加编辑结束事件，在function fun（）函数中添加一段JS代码:alert(“事件编辑结束触发”)；如下图所示

1.4保存并填报

点击设计器中的填报预览，并进入填报的编辑状态，输入文本，并按回车键，效果如下

此时编辑结束事件被触发

Web报表主题相关文章：