Web报表工具FineReport中JavaScript的使用-阿里云开发者社区

开发者社区> 技术小阿哥> 正文

Web报表工具FineReport中JavaScript的使用

简介:
+关注继续查看

报表软件FineReport采用的是jQuery v1.9.2框架,jQuery是一个快速的,简洁的JavaScript库,能让用户更方便地处理HTML documentsevents,实现动画效果,方便地为网站提供AJAX交互,并且它兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。FineReport报表解析后最终成为一个html页面,因此可以使用JS对报表进行各种处理,可以选择使用jQuery框架的所有方法对报表进行操作。在此基础上,FineReport还封装了很多内置的JS方法,这里我就先介绍JS的一些基本使用。

1. 如何使用JS

1.1 报表模板中使用JS

作用机理:

设计模板时可以给控件、工具栏按钮、整个报表添加JS事件,每个事件对应一个function。当报表转为html页面时会将这些function加到html的头部head。当事件被触发时如点击按钮时,或者导出打印报表时,对应的function就会被执行。

引入现成的JS文件:

单个模板引入外部JS文件:分页预览、填报预览或者数据分析旁的设置图标,然后点击引用JavaScript

报表工程下所有模板统一引入外部JS文件:服务器>服务器配置>引用JavaScript

相对路径引用JS:相对于报表工程目录如WebReport,如WebReport\js下有引用的JS文件test.js,则相对路径为js/test.js

绝对路径引用JS:如D:\tomcat\webapps\WebReport\WEB-INF\scripts\script.js

事件编辑界面:

FineReport有统一的事件编辑界面,如按钮控件设置>事件编辑>添加点击事件便可看到事件编辑界面了,如下图:



1.2 自定义页面中使用JS

通过获取iframe中的报表再使用FineReportJS方法

如:报表嵌入在iframeid"reportFrame"时,调用报表的打印预览方法,代码如下:

1
document.getElementById('reportFrame').contentWindow.contentPane.printPreview();

引入FineReportjs文件再使用FineReportJS方法

代码:

1
2
3
4
5
6
7
8
<script type="text/javascript" src="/WebReport/ReportServer?op=resource&resource=/com/fr/web/jquery.js"></script> 
<script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
<script type='text/javascript'
function doPrint(){ 
     var url="http://localhost:8075/WebReport/ReportServer?reportlet=gettingstarted.cpt";//端口和ip根据具体情况设定 
     FR.doURLFlashPrint(url); 
 </script>

  

2. JS语法

2.1 普通的JS语法

如在事件编辑里面弹出对话框,使用alert(要弹出内容)即可。

2.2 jQuery语法

jQuery的基础语法是:$("tr"),美元符号$定义 jQuery;选择符("tr")就可以获取页面所在行。

更多jQuery方法请参考其官方jQuery Version 1.9.2 API文档。

2.3 报表内置的JS方法

如何使用报表内部定义好的JS方法,可在事件编辑里面直接调用,如FR.doURLFlashPrint调用Flash打印,代码如下:

1
FR.doURLFlashPrint("http://localhost:8075/WebReport/ReportServer?reportlet=gettingstarted.cpt");

3. 自动补全JS

FineReport设计器内使用JS语句实现某功能时,为了避免JS代码输入错误,提供了JS自动补全功能,使用方法如下:

3.1 启动自动补全功能

 

设计器内默认不执行自动补全功能,点击文件>选项>编辑器设置,勾选默认执行该操作前面的复选框,如下图:



3.2 修改快捷键设置

 

设计器内置JS自动补全快捷键为ctrl+space,但是电脑不同,设置的快捷键不同,默认快捷键可能已经被占用,此时,需要修改快捷方式,双击自动补全快捷键:ctrl+SPACE,通过键盘操作一遍需要的快捷方式,比如说,将自动补全的快捷方式更改为ctrl+Q,如下图,在弹出的快捷方式修改框中,先按住ctrl,然后按下Q键,快捷方式即已修改:



3.3 效果查看

 

随意选择一处可以输入JS语句的地方,比如说,选中单元格,右键选择控件设置,点击事件编辑,添加一个初始化事件,在右侧JS输入框中输入con,然后,操作快捷键ctrl+Q,在右下角列出所有con开头的关键字:





本文转自 雄霸天下啦 51CTO博客,原文链接:http://blog.51cto.com/10549520/1749860,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ExcelReport使用
目录一、使用ExcelReport导出Excel二、ExcelReport源码解析三、扩展元素格式化器 ExcelReport的作者长久未对文档进行更新,后续对文章进行更新,并对源码进行解析。
1130 0
ActiveReports 报表应用教程 (8)---交互式报表之动态过滤
原文:ActiveReports 报表应用教程 (8)---交互式报表之动态过滤 用户可以使用ActiveReports参数 (Parameters)集合把数据提供给报表中的文本框或图表,也可以选择数据的一个子集显示到报表的特定区域,或者是把数据从主报表象子报表传递。
735 0
ActiveReports 报表应用教程 (9)---交互式报表之动态排序
原文:ActiveReports 报表应用教程 (9)---交互式报表之动态排序 在 ActiveReports 中除了提供对数据源进行排序的功能之外,还提供了最终用户排序功能,最终用户可以对报表进行区域内排序和整个数据源排序,结合数据钻取、过滤等功能可以让用户更方便地分析报表数据。
667 0
Crystal Reports拉报表报错:Error detected by database DLL
问题描述: 最近在使用Crystal Reports打印报表时,提示错误信息:“Error detected by database DLL.” 如下图: 经查找,是因为数据库名称不同造成的; 用户的测试环境使用的库名称为ClaimsReport; 我们本地使用的库名称为Claims;   解决方案: 打开报表工具Crystal Reports 8.5,进入Database->Set Location界面,如下图:   把红框中数据库名称去掉,然后点击按钮【Done】即可。
1048 0
ActiveReports 报表控件官方中文入门教程 (1)-安装、激活以及产品资源
原文:ActiveReports 报表控件官方中文入门教程 (1)-安装、激活以及产品资源 本系列文章主要是面向初次接触 ActiveReports 产品的用户,可以帮助您在三天之内轻松的掌握ActiveReports控件的基本使用方法,包括安装、激活、创建报表、绑定数据源以及发布等内容。
944 0
使用 TypeScript 改造构建工具及测试用例
最近的一段时间一直在搞TypeScript,一个巨硬出品、赋予JavaScript语言静态类型和编译的语言。 第一个完全使用TypeScript重构的纯Node.js项目已经上线并稳定运行了。 第二个前后端的项目目前也在重构中,关于前端基于webpack的TypeScript套路之前也有提到过:TypeScript在react项目中的实践。
1435 0
ActiveReports 报表应用教程 (1)---Hello ActiveReports
原文:ActiveReports 报表应用教程 (1)---Hello ActiveReports      在开始专题内容之前,我们还是了解一下 ActiveReports 是一款什么产品:ActiveReports是一款在全球范围内应用非常广泛的报表控件,以提供.NET报表所需的全部报表设计功能领先于同类报表控件,包括对交互式报表的强大支持、丰富的数据可视化形式、与Visual Studio的完美集成、以及对WPF / WinForm / ASP.NET / Silverlight和Windows Azure的多平台支持等。
1144 0
ActiveReports 报表应用教程 (4)---分栏报表
原文:ActiveReports 报表应用教程 (4)---分栏报表 在 ActiveReports 中可以实现分栏报表布局样式,可以设置横向分栏、纵向分栏,同时进行分栏和分组设置,统计分栏分组的小计、合计等。
844 0
8434
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载