Web报表工具-专业博客 » Java Script

Web报表工具超链接引用JavaScript

admin — Sun, 05 Dec 2010 12:05:39 +0000

在Web报表工具中，可以实现用户在点击超级链接的时候，根据输入的页码，来决定链接到指定的页面。以FineReport报表工具为例，有两种引用方式：

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保存预览

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

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

文章转自：http://blog.vsharing.com/fanfanzheng/A1296481.html

Web报表主题相关文章：

Web报表工具内置JS使用之十三

admin — Sun, 03 Oct 2010 03:00:07 +0000

用户在使用Web报表工具时，假如需要实现一些程序应用，在HTML添加一些动态内容，需要响应特殊的事件等等，就需要自己编辑js代码。在之前的系列文章中，以FineReport报表工具为例，介绍了许多内置JS的使用。下面来列表说明此款web报表工具所包含的大量供用户调用的JS函数。

1．对象函数

Array：

indexOf//计算一个参数，返回它在数组中的位置，如果不在数组中，则返回-1

remove//移除数组对象中一个指定的元素，并返回一个新的数组

String：

leftPad//返回一个左对齐的字符串

format//返回格式化后的字符串

startWith//判断一个字符串是否以指定的字符串开始

endWith//判断一个字符串是否以指定的字符串结束

2．常态函数

FR.isArray//判断一个对象是否是一个数组

FR.toRE//将普通字符串转化为表示正则表达式的字符串

FR.extend//实现JavaScript类的继承

FR.SessionMgr.get //根据sessionID生成BasePane

FR.cjkEncode//返回对中日韩问做了特殊转换的字符串

FR.cjkDecode//将cjkEncode处理过的字符串转化为原始字符串

FR.jsonEncode//返回json格式的字符串

FR.jsonDecode//将json格式的字符串转化为对象

FR.object2String//将object转换为一个字符串并以json的格式来写这个字符串

FR.contains//判断对象c是否包含在对象p中

FR.accDiv//精确除法

FR.accMul//精确乘法

FR.accAdd//精确加法

FR.accMin//精确减法

3． UI函数

FR.showDialog//显示一个对话框

FR.showIframeDialog//在一个iframe中显示对话框

FR.showRemoteDialog//显示一个异步加载的对话框

FR.closeDialog//关闭对话框

FR.Msg.Alert//对window的alert方法的替代实现

FR.Msg.Confirm//确认信息对话框

FR.Msg.Prompt//输入信息对话框

4．打印

FR.doURLPDFPrint//使用PDF打印指定url的报表

FR.doURLAppletPrint//使用Applet打印指定url的报表

FR.doFlashURLPrint//使用Flash打印指定ur的报表

5． jQuery布局

__border__//把指定dom元素按东南西北中的方式布局

__grid__ //把指定的dom元素按格子分布方式布局

6．组件注册和生产

FR.comp.reg//注册是一个指定type的组件

FR.comp.create//在指定dom节点上生成一个组件

7． FR.OB(事件观察者)

fireEvent//触发一个有FR.OB对象定义的事件

on//给FR.OB对象添加一个事件

once//给FR.OB对象添加一个仅执行一次的事件

un//从一个FR.OB中移除掉指定事件

purgeListeners //移除掉一个FR.OB下的所有事件

8． FR.Widget(控件) extends OB

isEnable //判断一个控件是否可用

isVisible//判断一个控件是否可见

enable//使控件可用

disable//使控件不可用

9． FR.Form(表单) extends OB

formSubmit//表单提交

getValueByName//根据名字获取表单对象中控件的值

getWidgetByName//很据名字获取表单对象中的控件

getWidgetByCell//根据单元格获取控件

10． FR.BasePane extends Widget

Load//加载报表页面(展现、填报)

loadReportPane

zoom// IE6下的放大镜

11． FR.BaseEditor extends Widget

getValue//获取编辑器的值

setValue//设置编辑器的值

reset//重置编辑器的值，设为字符串

isValidate//判断当前编辑器的值是否有效

getErrorMsg//获取编辑器值无效时的错误信息

startEditing//编辑器开始编辑

stopEditing//编辑器停止编辑

12．

FR.FileUploadEditor(文件上传控件) extends BaseEditor

FR.CheckBoxGroup(复选按钮组控件) extends BaseEditor

FR.RadioGroup(单选按钮组控件) extends BaseEditor

FR.ToogleButton extends BaseEditor

Selected//检查button的选中状态或者设置button的选中状态

FR.CheckBox extends ToogleButton

FR.Radio extends ToogleButton

FR.TextEditor(文本控件) extends BaseEditor

selectText//选取文本编辑器值的指定位置的字符串

FR.NumberEditor(数字控件) extends TextEditor

FR.DateTimeEditor(日期时间控件) extends TextEditor

FR.TriggerEditor extends TextEditor

onTriggerClick//点击trigger图标的事件

FR.ComboBoxEditor(下拉框控件) extends TriggerEditor

onTriggerClick

setMode//设置下拉框的模式，通过该设置可以让下拉框强制重新加载数据

isExpanded //判断下拉框的下拉菜单是否已经展现

expand//打开下拉框的下拉菜单

collapse//关闭下拉框的下拉菜单

FR.CheckboxEditor(下拉复选框) extends ComboBoxEditor

FR.TreeComboBoxEditor(下拉树) extends CheckboxEditor

13.

FR.PagePane extends BasePane

currentPageIndex//全局变量：该ReportPage所属的ReportPage集中的序号

reportTotalPage//全局变量：该ReportPage所属的ReportPage集所生成的总的ReportPage的个数

gotoPage//将页面跳转到指定页

gotoFirstPage //页面跳转至首页

gotoLastPage//页面跳转至最后一页

gotoPreviousPage //页面跳转至当前页的上一页

gotoNextPage//页面跳转至当前页的下一页

printReportServer//服务器打印

emailReport //邮件发送

pdfPrint// PDF打印

appletPrint// Applet打印

flashPrint// Flash打印

exportReportToPDF //将报表导出成PDF

exportReportToExel//将报表导出成excel

exportReportToWord//将报表导出成word

14.

FR.WritePane extends BasePane

curLGP//变量：填报页面当前的逻辑数据处理对象

getCellValue //获取指定格子的值

setCellValue//设置指定格子的值

stopEditing//停止当前填报面板的编辑

verifyAndWriteReport//在自动校验后才提交报表入库，如果校验失败，则不会入库

writeReport//直接提交报表入库

saveReport//保存报表

verifyReport//校验报表

pdfPrint// PDF打印

flashPrint// Flash打印

exportReportToPDF//将报表导出成PDF

exportReportToExcel//将报表导出成Excel

exportReportToWord//将报表导出成Word

printReportServer//服务器端打印

emailReport//邮件发送

FR.WLGP(WritePane的逻辑数据处理对象) extends FR.OB

Idx//变量：报表索引

getCellValue//获取指定格子的值

setCellValue//设置指定格子的值

fireCellValueChange//单元格值改变后出发该函数

isSelectable//判断该dom的tdCell是否可被选中

selectTDCell//选中domtdCell。也就是加个黑边框，并确保tdCell在屏幕显示范围内

editTDCell//编辑domtdCell

clearCellSelection//清除格子的选中状态

displayTDCell //把值显示在td里面

Web报表主题相关文章：

Web报表工具内置JS使用之十二

admin — Fri, 01 Oct 2010 02:48:17 +0000

用户在使用Web报表工具时，默认情况下，填报预览时，焦点所在的编辑框是用黑色加重显示的，其实通常报表工具来说明用红色加重显示焦点框。

1.1 打开reportlets\doc\Tutorial\Form\stuff.cpt 报表。

1.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

确定后保存报表

1.3 分页预览

点击设计器中的分页预览，可以看到进入编辑状态的焦点框变成红色了

注：同理，冻结线也可以按照类似的步骤进行自定义。

文章转自：http://javareport.blog.chinabyte.com/2010/09/28/105/

Web报表主题相关文章：

Web报表工具内置JS的使用之十

admin — Fri, 24 Sep 2010 03:10:47 +0000

自定义填报

在使用Web报表工具填报时，个别用户为了需求，需要自定义填报。

下面以FineReport Web报表工具在报表属性中的填报页面设置中可以自定义填报功能。

实例：

该实例实现首先在web报表工具栏上加一个按钮，通知服务器要做填报；然后服务器获得当前的SessionIDInfor，取出当前的报表，获得报表中A1、B1扩展后的格子，再把这组数据insert到数据库中；最后返回客户端一个讯息，表示填报成功了，客户端再弹个对话框，提示填报成功了。

1. 连接数据库FRDemo
2. 报表设计

2.1 新建报表

2.2 模板设计

添加一个名为ds1的数据库查询：SELECT * FROM customer，表样设计，如图

2.3 自定义报表填报属性

2.4 定义单元格空间属性

2.5 自定义报表Web属性

点击菜单栏报表|报表Web属性，进入报表Web属性窗口，在填报页面设置栏目中，将左边需要显示的按钮拖到中间的窗口中，并在右边窗口添加加载结束事件，实现自定义的填报功能，如图所示

在加载结束事件窗口中添加事件的JS代码

具体js代码如下

var $toolbar = $(‘.FR-ToolBar-disabled > 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，代码为：

<%@ page import=”com.fr.web.CustomSubmit” %>

<%@ page contentType=”text/html” %>

CustomSubmit.dealWithTest(request, response);

将该test.jsp文件放在设计器安装的WebReport目录下。

该test.jsp文件又引用了一个CustomSubmit类，将该类编译后的.class文件放在

%WebReport\WEB-INF\classes\com\fr\web目录下，该类的代码具体如下

packagecom.fr.web;

importjava.io.PrintWriter;

importjava.util.ArrayList;

importjava.util.List;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importcom.fr.base.ColumnRow;

importcom.fr.report.Report;

importcom.fr.report.core.FormReport;

importcom.fr.report.core.PackedReport;

importcom.fr.web.ParameterConsts;

importcom.fr.web.core.SessionDealWith;

importcom.fr.web.core.SessionIDInfor;

importcom.fr.web.core.WebUtils;

publicclassCustomSubmit {

publicstaticvoiddealWithTest(HttpServletRequestreq, HttpServletResponse res) throws Exception {

String sessionID = WebUtils.getHTTPRequestParameter(req,ParameterConsts.SESSION_ID);

SessionIDInforsessionIDInfor = SessionDealWith.getSessionIDInfor(sessionID);

List cellRelation = newArrayList();

for(int i = 0, len = sessionIDInfor.getWorkBook2Show().getReportCount(); i

Report report = sessionIDInfor.getWorkBook2Show().getReport(i);

if (report instanceofFormReport&& report instanceofPackedReport) {

Report fr = (PackedReport)report;

//请注意这步，我想要取的是A1和B1两个格子扩展以后的他们之间关系和值，如果是想拿A1,B1,D5，对应添加ColumnRow.valueOf(“D5″)既可

List rl = ((FormReport)report).getExtendColumnRowList(newColumnRow[] {ColumnRow.valueOf(“A1″), ColumnRow.valueOf(“B1″)});

for (int c = 0, cl = rl.size(); c < cl; c++) {

ColumnRow[] crs = (ColumnRow[])rl.get(c);

ColumnRowValue[] crvs = newColumnRowValue[crs.length];

for (int index = 0, il = crs.length; index

crvs[index] = newColumnRowValue(crs[index], fr.getCellValue(crs[index].column, crs[index].row));

}

cellRelation.add(crvs);

}

//cellRelation里面存放着扩展以后的格子之间的关系和格子的值

//以111.cpt模板为例，数据列扩展后城市NewYork对应ID 1和4，在cellRelation里面就是cellRelation.get(0)和cellRelation.get(1)，对应着两个ColumnRowValue[]

//第一个ColumnRowValue数组的ColumnRowValue[0]的ColumnRow是A1，Value是NewYork,ColumnRowValue[1]的ColumnRow是B1，Value是1

//第二个ColumnRowValue数组的ColumnRowValue[0]的ColumnRow是A1，Value是NewYork,ColumnRowValue[1]的ColumnRow是B2，Value是4

if (cellRelation.size() > 0) {

PrintWriter writer = WebUtils.createPrintWriter(res);

for (int i = 0, len = cellRelation.size(); i

ColumnRowValue[] crvs = (ColumnRowValue[])cellRelation.get(i);

StringBuffersb = newStringBuffer();

for (int v = 0, vl = crvs.length; v

if (v != 0) {

sb.append(” “);

}

sb.append(crvs[v].toString());

if (v == vl – 1) {

sb.append(“
”);

}

writer.println(sb.toString());

}

writer.flush();

writer.close();

}

publicstaticclassColumnRowValue {

privateColumnRowcr;

private Object value;

publicColumnRowValue(ColumnRowcr, Object value) {

this.cr = cr;

this.value = value;

}

publicColumnRowgetColumnRow() {

returncr;

}

public Object getValue() {

return value;

}

public String toString() {

returnnew StringBuffer().append(cr.toString()).append(“:”).append(value.toString()).toString();

}

3. 保存并预览

点击填报预览，BS界面除了FR报表自带的提交按钮和数据校验按钮外，还多了一个测试按钮

点击测试按钮，出现测试界面

文章转自：http://blog.csdn.net/best_report/archive/2010/09/24/5902877.aspx

Web报表主题相关文章：

web报表工具内置JS的使用之八

admin — Sun, 19 Sep 2010 02:20:25 +0000

在使用web报表工具填报时，提交会出现两种结果，提交成功和提交失败，可以对这两种结果进行判断并作出反应，从而跳转到其他页面。

以FineReport为例，介绍如何在web报表工具中实现表单提交超级链接，原V6.2版本中可以在报表填报属性中添加，如下图所示

在V6.5版本中同样可以通过报表|报表Web属性|填报页面设置添加提交成功和提交失败事件进行编辑。主要用到的事件为加载页面事件：

// 通过页面路径加载相应页面

window.open(“[URL]“)

实例：

1． 打开模板

2． 添加提交事件

点击填报|报表Web属性，选择填报页面设置，进入填报页面设置窗口，在右边栏中添加提交成功和提交失败事件，如下图所示

具体的填报成功事件和填报失败事件代码如下

填报成功事件，添加JS代码：window.open(“http://www.finereport.com”)；

在填报成功后，连接到相应页面。

提交失败事件，JS代码：

window.open(“http://localhost:8075/WebReport/ReportServer?op=fs”)；

该代码用于填报提交失败后打开产品演示文档。

文章转自：http://blog.donews.com/finereport/archive/2010/09/16/1583622.aspx

Web报表主题相关文章：

web报表工具内置JS的使用之七

admin — Thu, 16 Sep 2010 06:28:32 +0000

在使用web报表工具实现填报时，有时需要在编辑完数据后跟其他具体某个格子对比，进行及时校验。当报表中提供的及时校验不能满足需求时，可以通过JS事件来进行及时校验。

以FineReport为例，介绍下如何用web报表工具内置JS及时校验-跨格数据校验

1. 设计模板

2.1 新建报表

2.2 模板设计，如下图所示

2.3 控件设置

2.4 添加事件

l 对B2单元格控件添加编辑结束事件：

var D2value = arguments[1].getCellValue(“D2″);

if (this.getValue() < D2value){

FR.Msg.alert(FR.i18n.Alert, “该值不能小于” + D2value);

return false;

}

说明：D2value是自定义变量，用于获得D2单元格的值，if语句是用来判断该单元格输入后的值是否小于D2value，如果是则弹出警告：该值不能小于6。

对B3单元格控件添加编辑结束事件：

var D3value = arguments[1].getCellValue(“D3″);

if (this.getValue() != D3value){

FR.Msg.alert(FR.i18n.Alert, “该值应等于” + D3value);

return false;

}

说明：D3value是自定义变量，用于获得D3单元格的值，if语句是用来判断该单元格输入后的值是否等于D3value，如果不是是则弹出警告：该值应等于abc。

2. 保存并预览

点击填报预览，在B2单元格中输入数字5，并按回车确定，则弹出警告，如图
在B3单元格中输入add，并按回车确定，也弹出校验警告，如图

文章转自：http://blog.donews.com/finereport/archive/2010/09/14/1583608.aspx

Web报表主题相关文章：

Web报表工具内置JS的使用之六

admin — Wed, 08 Sep 2010 06:34:20 +0000

表单填报触发事件

表单控件的取值与置数

使用FineReport报表工具时，在填报页面，也可以得到各控件的值及对控件进行置数，方法与参数界面中类似。

// 获得当前控件输入的值

var[Value] = this.getValue();

// 通过单元格名称获取其他单元格的值

var[curLGP] = arguments[1];//首先，获得当前form对象

var [Cellvalue] = curLGP.getCellValue(“[Cell]“);//通过单元格名称获得Cell单元格的值

// 对单元格进行置数并显示

var[curLGP] = arguments[1];//首先，获得当前form对象

curLGP.setCellValue(“[Cell]“, null, [Value]);//给单元格Cell置数，改变其实际值，但不显示，字符串需要加上引号

curLGP.displayTDCell($(“#[Cell]-0″), [Value]);//表示显示出Cell单元格的实际值Value

实例：

该实例实现了在填报页面上用一个表单控件控制另一个表单控件，当控件1输入之后，取控件2的值，判断一下条件，若不符合条件，则置数，符合则不变。

1. 设计模板

1.1 新建报表

1.2 模板设计，如图所示

1.3 设置控件属性

1.4 添加事件

在A2单元格控件的事件编辑中添加编辑结束事件，具体JS代码为：

varcurLGP = arguments[1];

var C2value = curLGP.getCellValue(“C2″);

if(C2value != 10){

curLGP.setCellValue(“C2″, null, “10″);

curLGP.displayTDCell($(“#C2-0″), “10″);

}

说明：

varcurLGP = arguments[1];//获得本form对象

varC1value = curLGP.getCellValue(“C2″);//获得C2单元格的值

curLGP.setCellValue(“C2″, null, “10″);//给C2置数，改变其实际值，但不显示

curLGP.displayTDCell($(“#C2-0″), “10″);//表示显示出C2的实际值

具体如图所示

2. 保存并预览

点击web报表设计器中的填报预览，效果如图

在控件1中输入数据后回车，这时触发编辑结束事件，取C2单元格的值，根据判断，不是10，此时将C2单元格置数为10

文章转自：http://blog.chinaunix.net/u/17568/showart.php?id=2320670

Web报表主题相关文章：

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

admin — Sat, 04 Sep 2010 08:20:20 +0000

参数控件动态显示

在使用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控件设置

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. 保存并预览

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

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

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

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

Web报表主题相关文章：

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

admin — Wed, 01 Sep 2010 13:55:06 +0000

参数校验-日期校验

在使用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代码一样

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

Web报表主题相关文章：

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

admin — 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报表主题相关文章：