FineReport报表工具内置JS的使用

FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（ObjectBased）和事件驱动（EventDriver）的编程语言。JavaScript是动态的，它可以直接对用户或客户输入做出响应，A无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(HomePage)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。即JavaScript源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器直接解释执行。本章介绍了FineReport内置的JavaScript函数及其用法。触发事件控件的事件在控件设置的事件编辑中，事件编辑共有七种触发事件：编辑前、编辑后、编辑结束、点击、初始化后、状态改变及回调。其中编辑前、编辑结束只在表单填报时起作用。编辑后、点击、初始化后、状态改变等在表单填报及参数界面上都可以使用。1.编辑前该事件是在填报时进入编辑状态后被触发简单例子1.1新建一张空白报表，然后设计成如下格式1.2设置报表填报属性，在此不做赘述，具体设置方法可参考填报专题相关章节FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：单元格控件类型设置为文本，并在B2控件中添加编辑前事件，在functionfun()函数中添加一段JS代码：alert(事件编辑前触发);如下图所示1.4保存并填报点击设计器中的填报预览，进入填报的编辑状态，效果如下此时当光标移至姓名单元格进行编辑时，编辑前事件被触发。2.编辑后该事件在表单填报及参数界面上都可以被触发。对于文本、数字控件，当输入任何字母或文字标点后触发；对于下拉框，复选框等控件，当选择下拉选项后被触发，具体设置方法类似于编辑前事件，在这不再赘述。FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：编辑结束该事件只有在填报确认单元格输入内容如键盘输入回车后才能被触发具体设置方法类似于编辑前事件，在这不再赘述。4.点击该事件是在点击按钮，或点击下拉框、下拉树、下拉复选框等之后被触发简单例子4.1新建报表4.2使用默认的参数界面，如图4.3控件设置右击按钮控件，选择控件设置，打开控件设置面板，添加点击事件，在functionfun()函数中添加一段JS代码:alert(点击我就触发该事件啦！);如下图所示4.4保存并预览点击设计器中的分页预览，点击查询按钮，此时点击事件被触发，如下图FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：初始化后该事件是按钮控件所特有，在点击分页预览或填报预览后初始化界面时被触发简单例子5.1新建报表5.2使用默认的参数界面，如图5.3控件设置右击按钮控件，选择控件设置，打开控件设置面板，添加初始化后事件，在functionfun()函数中添加一段JS代码:alert(初始化后就触发该事件啦！);如下图所示FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：保存并预览点击设计器中的分页预览，就可以看见如下图所示效果6.状态改变该事件为单选按钮、复选框组控件所特有，在其状态改变时被触发简单例子6.1定义报表参数p1，并设置其默认值为男6.2在参数界面上，定义参数p1的控件属性，如下图FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：的控件，选择控件设置，打开控件设置面板，添加状态改变事件，在functionfun()函数中添加一段JS代码:alert(单选按钮的状态改变啦！);如下图所示6.4保存并预览点击设计器中的分页预览，单选按钮默认选中“男”，当点击“女”时就会触发状态改变事件，如下图FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：回调该事件为文件控件所特有，是在上传完文件之后触发该事件简单例子7.1新建报表，定义文件控件，如下图：7.2添加事件点击文件控件，打开控件设置面板，添加回调事件，在functionfun()函数中添加一段JS代码:alert(回调事件触发啦！);如下图所示FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：保存并预览点击设计器中的填报预览，上传文件结束后，触发回调事件，如下图FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：其他事件除了各控件中可以添加事件外，超级链接也可以引用JavaScript,具体使用方法将在之后的章节中详述。同时在报表|报表Web属性及服务器|服务器配置中也可以添加各种JS事件，如下图所示FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：该例子实现用户在点击超级链接的时候，根据输入的页码，来决定链接到指定的页面。有两种引用方式：1.将写好的方法保存为js文件，放置在工程下，在超级链接中直接调用1.1新建报表1.2模板设计在B3单元格中写入公式：=range(1,40)，并将其扩张属性改为“从左到右扩展”，并将其设为居中，如下图所示：1.3添加超链接右击B3单元格，选择超级链接，进入超级链接界面，点击添加JavaScript,如下图所示FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：写一段Js代码，内容为：functiondemo(){vartest=function(){varnum=parseInt(arguments[0]);contentPane.gotoPage(num);};varvalue=FR.Msg.prompt(输入,页码,2,test);}说明：varnum=parseInt(arguments[0]);//获得输入框中输入的页码contentPane.gotoPage(num);//跳转到相应页码varvalue=FR.Msg.prompt(输入,页码,2,test);//参数分别为对话框标题、对话框内容、输入框默认值、回调函数将此段内容保存为test.js文件，放在WebReport目录下，在超级链接界面中插入该test.js，并在下面的functionfun()函数中调用demo();效果如下图所示：FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：保存并预览点击超级链接，出现如下图所示的输入提示对话框在输入对话框中输入需要跳转的页数，并点击确定按钮，就跳转到相应的页面。2.直接在超级链接界面上写js方法2.1新建报表2.2模板设计在B3单元格中写入公式：=range(1,40)，并将其扩张属性改为“从左到右扩展”，并将其设为居中，如下图所示：FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：添加超链接右击B3单元格，选择超级链接，进入超级链接界面，点击添加JavaScript，如下图所示functionfun(){}函数中写入如下JS语句：functiontest(){varnum=parseInt(arguments[0]);_g('${sessionID}').gotoPage(num);};varvalue=FR.Msg.prompt(输入,页码,2,test);说明：_g('${sessionID}').gotoPage(num);//跳转到相应页码如下图所示FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：保存预览点击超级链接，出现如下图所示的输入提示对话框在输入对话框中输入需要跳转的页数，并点击确定按钮，就会跳转到相应的页面。参数控件触发事件参数控件的取值与置数参数界面中，最常见的就是获取参数的值进行运算或者将其作为另一个参数的判断依据，在FineReport报表网页脚本中，也提供了获取参数控件实际值，显示值并给参数置数的方法。//取当前控件的实际值FineReport------报表技术领跑者南京帆软软件公司商务咨询电话：86-025-51862240商务咨询邮箱：[e-mail]公司网址：[ParaValue]=this.getValue();//通过参数控件名称来获取参数控件实际值var[ParaValue]=this.options.form.getWidgetByName([ParaName]).getValue();//通过arguments[i]获取当前参数控件显示值var[DisplayedValue]=arguments[0];//通过控件A获取控件B的显示值var[DisplayedValue]=this.options.form.