FineReport报表工具内置JS的使用
?南京帆软软件公司
?商务咨询电话：86-025-5186 2240
?商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?公司网址：https://www.wendangku.net/doc/4f5359279.html,
FineReport报表工具内置JS的使用JavaScript概述
JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。JavaScript 是动态的，它可以直接对用户或客户输入做出响应，A无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。即JavaScript源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器直接解释执行。
本章介绍了FineReport内置的JavaScript函数及其用法。
触发事件
控件的事件
在控件设置的事件编辑中，事件编辑共有七种触发事件：编辑前、编辑后、编辑结束、点击、初始化后、状态改变及回调。
其中编辑前、编辑结束只在表单填报时起作用。
编辑后、点击、初始化后、状态改变等在表单填报及参数界面上都可以使用。
1.编辑前
该事件是在填报时进入编辑状态后被触发
简单例子
1.1新建一张空白报表，然后设计成如下格式
1.2设置报表填报属性，在此不做赘述，具体设置方法可参考填报专题相关章节
? 南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
1.3 定义单元格填报属性
将B2单元格控件类型设置为文本，并在B2控件中添加编辑前事件，在function
fun()函数中添加一段JS 代码： alert("事件编辑前触发"); 如下图所示
1.4 保存并填报
点击设计器中的填报预览，进入填报的编辑状态，效果如下
此时当光标移至姓名单元格进行编辑时，编辑前事件被触发。
2. 编辑后
该事件在表单填报及参数界面上都可以被触发。 对于文本、数字控件，当输入任何字母或文字标点后触发；对于下拉框，复选框等控件，
当选择下拉选项后被触发，具体设置方法类似于编辑前事件，在这不再赘述。
? 南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
3. 编辑结束
该事件只有在填报确认单元格输入内容如键盘输入回车后才能被触发
具体设置方法类似于编辑前事件，在这不再赘述。
4. 点击
该事件是在点击按钮，或点击下拉框、下拉树、下拉复选框等之后被触发
简单例子 4.1 新建报表
4.2 使用默认的参数界面，如图
4.3 控件设置
右击按钮控件，选择控件设置，打开控件设置面板，添加点击事件，在function fun()
函数中添加一段JS 代码: alert("点击我就触发该事件啦！"); 如下图所示
4.4 保存并预览
点击设计器中的分页预览，点击查询按钮，此时点击事件被触发，如下图
? 南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
5. 初始化后
该事件是按钮控件所特有，在点击分页预览或填报预览后初始化界面时被触发
简单例子 5.1 新建报表
5.2 使用默认的参数界面，如图
5.3 控件设置
右击按钮控件，选择控件设置，打开控件设置面板，添加初始化后事件，在function fun()函数中添加一段JS 代码: alert("初始化后就触发该事件啦！"); 如下图所示
? 南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
5.4 保存并预览
点击设计器中的分页预览，就可以看见如下图所示效果
6. 状态改变
该事件为单选按钮、复选框组控件所特有，在其状态改变时被触发 简单例子
6.1 定义报表参数p1，并设置其默认值为男
6.2 在参数界面上，定义参数p1的控件属性，如下图
? 南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
6.3 添加事件
右击p1的控件，选择控件设置，打开控件设置面板，添加状态改变事件，在function
fun()函数中添加一段JS 代码: alert("单选按钮的状态改变啦！"); 如下图所示
6.4 保存并预览
点击设计器中的分页预览，单选按钮默认选中“男”，当点击“女”时就会触发状态改变事件，如下图
? 南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
7. 回调
该事件为文件控件所特有，是在上传完文件之后触发该事件 简单例子
7.1 新建报表，定义文件控件，如下图：
7.2 添加事件
点击文件控件，打开控件设置面板，添加回调事件，在function fun()函数中添加
一段JS 代码: alert("回调事件触发啦！"); 如下图所示
?南京帆软软件公司
?商务咨询电话：86-025-5186 2240
?商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?公司网址：https://www.wendangku.net/doc/4f5359279.html,
7.3保存并预览
点击设计器中的填报预览，上传文件结束后，触发回调事件，如下图
?南京帆软软件公司
?商务咨询电话：86-025-5186 2240
?商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?公司网址：https://www.wendangku.net/doc/4f5359279.html,
其他事件
除了各控件中可以添加事件外，超级链接也可以引用JavaScript,具体使用方法将在之后的章节中详述。同时在报表|报表Web属性及服务器|服务器配置中也可以添加各种JS事件，如下图所示
? 南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
超链接引用JavaScript
该例子实现用户在点击超级链接的时候，根据输入的页码，来决定链接到指定的页面。 有两种引用方式：
1. 将写好的方法保存为js 文件，放置在工程下，在超级链接中直接调用
1.1 新建报表
1.2 模板设计
在B3单元格中写入公式：=range(1,40)，并将其扩张属性改为“从左到右扩展”，
并将其设为居中，如下图所示：
1.3 添加超链接
右击B3单元格，选择超级链接，进入超级链接界面，点击添加JavaScript,
如下图所示
?南京帆软软件公司
?商务咨询电话：86-025-5186 2240
?商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?公司网址：https://www.wendangku.net/doc/4f5359279.html,
写一段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();
效果如下图所示：
? 南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
1.4 保存并预览
点击超级链接，出现如下图所示的输入提示对话框
在输入对话框中输入需要跳转的页数，并点击确定按钮，就跳转到相应的页面。
2. 直接在超级链接界面上写js 方法
2.1 新建报表 2.2 模板设计
在B3单元格中写入公式：=range(1,40)，并将其扩张属性改为“从左到右扩展”，并将其设为居中，如下图所示：
?南京帆软软件公司
?商务咨询电话：86-025-5186 2240
?商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?公司网址：https://www.wendangku.net/doc/4f5359279.html,
2.3添加超链接
●右击B3单元格，选择超级链接，进入超级链接界面，点击添加JavaScript，
如下图所示
●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); //跳转到相应页码
如下图所示
?
南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
2.4保存预览
点击超级链接，出现如下图所示的输入提示对话框
在输入对话框中输入需要跳转的页数，并点击确定按钮，就会跳转到相应的页面。
参数控件触发事件 参数控件的取值与置数
参数界面中，最常见的就是获取参数的值进行运算或者将其作为另一个参数的判断依据，在
FineReport 报表网页脚本中，也提供了获取参数控件实际值，显示值并给参数置数的方法。
//取当前控件的实际值
?南京帆软软件公司
?商务咨询电话：86-025-5186 2240
?商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?公司网址：https://www.wendangku.net/doc/4f5359279.html,
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参数设计
打开参数设计界面，参数控件布局如下
? 南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
●
username 控件类型为下拉框，数据自定义，如图
●
state 控件类型选择单选按钮组，数据也为自定义，如图
?南京帆软软件公司
?商务咨询电话：86-025-5186 2240
?商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?公司网址：https://www.wendangku.net/doc/4f5359279.html,
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，如图所示
? 南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
2. 保存并预览
点击设计器分页预览，当username 有值是，state 置为1
当username 为空时，state 置为2
注意：state 无法通过username 置数为0，JS 里面，state 为0，默认返回false 且一个控件无法对另一个控件的显示值进行置数
参数校验-日期校验
内置参数查询界面当中可进行一些数据校验，例如有两个参数：开始时间和结束时间，结束时间必须在开始时间之后，否则进行提示。 1. 在提交按钮的事件编辑中写JS 代码 1.1 新建报表 1.2 模板设计
?南京帆软软件公司
?商务咨询电话：86-025-5186 2240
?商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?公司网址：https://www.wendangku.net/doc/4f5359279.html,
按照下图设计模板
1.3 添加数据源
新建一个名为ds1的数据库查询，SQL语句：SELECT * FROM EMPLOYEE
1.4 绑定数据列
按照下表进行数据列绑定
BIRTHDATE 大于或等于 $begintime AND BIRTHDATE 小于 $endtime
1.5 定义参数
打开菜单栏中报表|报表参数，新定义两个个名为begintime,endtime的参数，如图
? 南京帆软软件公司
? 商务咨询电话：86-025-5186 2240
? 商务咨询邮箱：business@https://www.wendangku.net/doc/4f5359279.html, ?
公司网址：https://www.wendangku.net/doc/4f5359279.html,
1.6 参数设计
● 打开参数设计界面，参数界面布局如下
●
日期控件设置
右击begintime 的控件，选择控件设置，控件类型选择日期，控件名选择begintime ，具体设置如下图所示