FRJS文档.doc

JavaScript概述JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。即JavaScript源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器直接解释执行。 本章介绍了FineReport内置的JavaScript函数及其用法。触发事件控件的事件在控件设置的事件编辑中，事件编辑共有七种触发事件：编辑前、编辑后、编辑结束、点击、初始化后、状态改变及回调。其中编辑前、编辑结束只在表单填报时起作用。 编辑后、点击、初始化后、状态改变等在表单填报及参数界面上都可以使用。 1. 编辑前该事件是在填报时进入编辑状态后被触发简单例子1.1 新建一张空白报表，然后设计成如下格式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 保存并预览点击设计器中的填报预览，上传文件结束后，触发回调事件，如下图其他事件除了各控件中可以添加事件外，超级链接也可以引用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(arguments0); contentPane.gotoPage(num); ;var value = FR.Mmpt(输入, 页码, 2, test); 说明：var num = parseInt(arguments0); /获得输入框中输入的页码contentPane.gotoPage(num); /跳转到相应页码var value = FR.Mmpt(输入, 页码, 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(arguments0); _g($sessionID).gotoPage(num);var value = FR.Mmpt(输入, 页码, 2,test);说明：_g($sessionID).gotoPage(num); /跳转到相应页码如下图所示2.4保存预览点击超级链接，出现如下图所示的输入提示对话框在输入对话框中输入需要跳转的页数，并点击确定按钮，就会跳转到相应的页面。参数控件触发事件参数控件的取值与置数参数界面中，最常见的就是获取参数的值进行运算或者将其作为另一个参数的判断依据，在FineReport报表网页脚本中，也提供了获取参数控件实际值，显示值并给参数置数的方法。/取当前控件的实际值var ParaValue = this.getValue();/通过参数控件名称来获取参数控件实际值var ParaValue = this.options.form.getWidgetByName(ParaName).getValue();/通过argumentsi获取当前参数控件显示值var DisplayedValue = arguments0;/通过控件A获取控件B的显示值var DisplayedValue = this.options.form.getWidgetByName(ParaName).options.items0.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当username为空时，state置为2注意：state无法通过username置数为0，JS里面，state为0，默认返回false且一个控件无法对另一个控件的显示值进行置数参数校验-日期校验内置参数查询界面当中可进行一些数据校验，例如有两个参数：开始时间和结束时间，结束时间必须在开始时间之后，否则进行提示。1. 在提交按钮的事件编辑中写JS代码1.1 新建报表1.2 模板设计按照下图设计模板1.3 添加数据源新建一个名为ds1的数据库查询，SQL语句：SELECT * FROM EMPLOYEE1.4 绑定数据列按照下表进行数据列绑定单元格数据集数据列属性B5ds1EMPID上到下扩展，居中，其余默认C5ds1EMPNAME上到下扩展，居中，其余默认D5ds1SEX上到下扩展，居中，其余默认E5ds1BIRTHDATE上到下扩展，居中，其余默认F5ds1ORIGN上到下扩展，居中，其余默认G5ds1SCHOOL上到下扩展，居中，其余默认H5ds1TEL上到下扩展，居中，其余默认双击B5单元格，在过滤页面当中，定义条件类型为单元格，添加条件： BIRTHDATE 大于或等于 $begintime AND BIRTHDATE 小于 $endtime1.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代码一样参数控件动态显示由于业务的需要，很多情况下需要当满足某个条件时，某些查询条件才显示出来，此时参数控件就需要动态的控制其是否可见。/通过控件的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-131.3 模板设计模板样式如下2.4 绑定数据列按照下表进行数据列绑定单元格数据集数据列属性C2ds1=财务报表( + $type + )不扩展，居中，其余默认C4ds1=$type不扩展，居中，其余默认D4ds1=if(type=日报,$date,if(type=月报,$year+.+$month,$year)不扩展，居中，其余默认C7ds1EquipmentID上到下扩展，居中，其余默认D7ds1Equipment上到下扩展，居中，其余默认E7ds1Amount汇总求和，居中，其余默认F7ds1costs汇总求和，居中，其余默认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. 保存并预览默认为日报，只显示出日期控件，预览效果如图 当选择月报时，右边弹出月份和年份下拉框，预览效果如图当选择年报时，右边弹出年份下拉框，预览效果如图表单填报触发事件表单控件的取值与置数在填报页面，也可以得到各控件的值及对控件进行置数，方法与参数界面中类似。/ 获得当前控件输入的值var Value = this.getValue();/ 通过单元格名称获取其他单元格的值var curLGP = arguments1; /首先，获得当前form对象var Cellvalue = curLGP.getCellValue(Cell); /通过单元格名称获得Cell单元格的值/ 对单元格进行置数并显示var curLGP = arguments1; /首先，获得当前form对象curLGP.setCellValue(Cell, null, Value); /给单元格Cell置数，改变其实际值，但不显示，字符串需要加上引号curLGP.displayTDCell($(#Cell-0), Value); /表示显示出Cell单元格的实际值Value实例：该实例实现了在填报页面上用一个表单控件控制另一个表单控件，当控件1输入之后，取控件2的值，判断一下条件，若不符合条件，则置数，符合则不变。1. 设计模板1.1 新建报表1.2 模板设计，如图所示1.3 设置控件属性单元格属性A2文本C2文本1.4 添加事件在A2单元格控件的事件编辑中添加编辑结束事件，具体JS代码为：var curLGP = arguments1;var C2value = curLGP.getCellValue(C2);if(C2value != 10) curLGP.setCellValue(C2, null, 10); curLGP.displayTDCell($(#C2-0), 10);说明：var curLGP = arguments1; /获得本form对象var C1value = curLGP.getCellValue(C2); /获得C2单元格的值 curLGP.setCellValue(C2, null, 10); /给C2置数，改变其实际值，但不显示curLGP.displayTDCell($(#C2-0), 10); /表示显示出C2的实际值具体如图所示2. 保存并预览点击设计器中的填报预览，效果如图在控件1中输入数据后回车，这时触发编辑结束事件，取C2单元格的值，根据判断，不是10，此时将C2单元格置数为10及时校验-跨格数据校验在实现填报时，有时需要在编辑完数据后跟其他具体某个格子对比，进行及时校验。当报表中提供的及时校验不能满足需求时，可以通过JS事件来进行及时校验。1. 设计模板2.1 新建报表2.2 模板设计，如下图所示 2.3 控件设置单元格属性B2数字控件B3文本控件2.4 添加事件l 对B2单元格控件添加编辑结束事件：var D2value = arguments1.getCellValue(D2);if (this.getValue() table tbody tr);var option = /icon: css:x-emb-email,listeners: once: false,action: function(e)var xml = _g($SessionID).generateReportXML(); $.ajax(url : test.jsp,type : POST,data : op : test1, sessionID : $SessionID, reportXML : xml,complete : function(res, status) FR.showDialog(Relation, 300, 400, res.responseText);),eventName: click,text: 测试,invisible: false,type: button,disabled: false,render: true;$button = $();FR.comp.create($button, button, option); $tc = $().append($button);$toolbar.append($tc);此段JS代码引用了一个test.jsp，代码为： 将该test.jsp文件放在设计器安装的WebReport目录下。该test.jsp文件又引用了一个CustomSubmit类，将该类编译后的.class文件放在%WebReportWEB-INFclassescomfrweb目录下，该类的代码具体如下package com.fr.web;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.fr.base.ColumnRow;import com.fr.report.Report;import com.fr.report.core.FormReport;import com.fr.report.core.PackedReport;import com.fr.web.ParameterConsts;import com.fr.web.core.SessionDealWith;import com.fr.web.core.SessionIDInfor;import com.fr.web.core.WebUtils;public class CustomSubmit public static void dealWithTest(HttpServletRequest req, HttpServletResponse res) throws Exception String sessionID = WebUtils.getHTTPRequestParameter(req,ParameterConsts.SESSION_ID);SessionIDInfor sessionIDInfor = SessionDealWith.getSessionIDInfor(sessionID); List cellRelation = new ArrayList(); for(int i = 0, len = sessionIDInfor.getWorkBook2Show().getReportCount(); i len; i+) Report report = sessionIDInfor.getWorkBook2Show().getReport(i); if (report instanceof FormReport & report instanceof PackedReport) Report fr = (PackedReport)report;/请注意这步，我想要取的是A1和B1两个格子扩展以后的他们之间关系和值，如果是想拿A1,B1,D5，对应添加ColumnRow.valueOf(D5)既可List rl = (FormReport)report).getExtendColumnRowList(new ColumnRow ColumnRow.valueOf(A1), ColumnRow.valueOf(B1); for (int c = 0, cl = rl.size(); c cl; c+) ColumnRow crs = (ColumnRow)rl.get(c); ColumnRowValue crvs = new ColumnRowValuecrs.length; for (int index = 0, il = crs.length; index 0) PrintWriter writer = WebUtils.createPrintWriter(res); for (int i = 0, len = cellRelation.size(); i len; i+) ColumnRowValue crvs = (ColumnRowValue)cellRelation.get(i); StringBuffer sb = new StringBuffer(); for (int v = 0, vl = crvs.length; v vl; v+) if (v != 0) sb.append( ); sb.append(crvsv.toString(); if (v = vl - 1) sb.append(); writer.println(sb.toString(); writer.flush(); writer.close(); public static class ColumnRowValue private ColumnRow cr; private Object value; public ColumnRowValue(ColumnRow cr, Object value) this.cr = cr; this.value = value; public ColumnRow getColumnRow() return cr; public Object getValue() return value; public String toString() return new StringBuffer().append(cr.toString().append(:).append(value.toString().toString(); 3. 保存并预览点击填报预览，BS界面除了FR报表自带的提交按钮和数据校验按钮外，还多了一个测试按钮点击测试按钮，出现测试界面自定义控件CSS在实际项目中，为了更符合使用者的审美观或者让FineReport报表和总体框架协调，可能需要修改一些页面显示的样式表(CSS)，如更换控件的图标或者改变填报表单控件的显示样式等。自定义控件图标如下以下拉树控件为例说明如何改变控件的图标。1下拉树模板制作1.1 新建报表1.2 定义参数在菜单栏中选择报表|报表参数，定义报表参数tree。1.3 参数界面设置，如下图所示1.4 控件设置，如下图所示类型选择下拉树，层次有两层，定义如下图1.5 分页预览分页预览可以看到默认的控件图标如下2. 引用CSS更换控件图标2.1 收集图标收集好需要使用的图标，推荐大小为1616，假设想让树叶的图标为leaf.gif。2.2 保存图标在WebReport目录下(即和WEB-INF平行的地方)新建一个文件夹，文件名为custom，将第一步的图标放入该文件夹内。2.3 生成CSS样式在custom文件夹内新建一个css文件，如叫custom_tree.css，内容如下：.bbit-tree-node-leafbackground:url(leaf.gif);说明：该语句是用来置换树叶的样式。2.4 引用CSS打开使用下拉树控件的报表，点击菜单报表|报表Web属性|引用css，在控件自定义样式表界面点插入按钮后写上custom_tree.css的相对路径：custom/custom_tree.css确定后保存报表。2.5 分页预览点击设计器中的分页预览，可看到更换图标后的下拉树效果3. 控件相关CSS? 下拉树控件.bbit-tree-node-expanded.bbit-tree-node-icon /节点展开的样式.bbit-tree-node-leaf.bbit-tree-node-icon /树叶的样式.bbit-tree-node-collapsed.bbit-tree-node-icon /闭合的样式.bbit-tree-node-loading.bbit-tree-node-icon /正在加载的样式填报焦点框变成红色默认情况下，填报预览时，焦点所在的编辑框是用黑色加重显示的，FineReport也可以让用户通过引用CSS样式来改变焦点框的颜色，以下就以用红色加重显示焦点框来做说明。3.1 打开reportletsdocTutorialFormstuff.cpt报表。3.2 引用CSS改变焦点框颜色l 在WebReport目录下新建一个文件夹，文件名为write，在write文件夹下新建一个名为custom_cell.css的文件,文件内容为：.fDtop, .fDbottom, .fDleft, .fDright, .fDdot border:1px solid red; 说明：该语句是用来改变焦点框的颜色l 引用CSS打开stuff报表，依次点击菜单报表|报表web属性|引用Css，在控件自定义样式界面点插入按钮后写上custom_cell.css的相对路径：write/custom_cell.css确定后保存报表3.3 分页预览点击设计器中的分页预览，可以看到进入编辑状态的焦点框变成红色了注：同理，冻结线也可以按照类似的