`

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"时,调用报表的打印预览方法,代码如下:

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

引入FineReportjs文件再使用FineReportJS方法

代码:

<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打印,代码如下:

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开头的关键字:



 

  • 大小: 13.4 KB
  • 大小: 7.5 KB
  • 大小: 12.7 KB
  • 大小: 21.8 KB
3
5
分享到:
评论

相关推荐

    报表开发工具FineReport中如何把报表放到网页中显示

    ### 报表开发工具FineReport中如何把报表放到网页中显示 #### 一、背景介绍 随着信息技术的发展,越来越多的企业倾向于使用基于浏览器/服务器(Browser/Server,简称BS架构)的系统来处理业务流程。这类系统通常...

    报表工具FineReport中如何把报表放到网页中显示

    ### 报表工具FineReport中如何把报表放到网页中显示 #### 一、背景与需求分析 随着互联网技术的发展,企业对于数据展示的需求越来越倾向于基于Web的解决方案。这些Web应用通常采用BS架构(Browser/Server架构),...

    报表工具FineReport根据条件控制参数控件是否显示

    以上就是如何在FineReport报表工具中根据条件动态控制参数控件的显示与可用性的详细步骤。通过这种方式,报表设计者可以使得最终用户在使用报表时获得更加流畅和人性化的体验,同时保证了报表的交互逻辑清晰合理。...

    Web报表工具FineReport的JS开发之字符串

    在报表开发过程中,有些需求可能无法通过现有的功能来实现,需要开发人员二次开发,以FineReport为例,可以使用网页脚本、API接口等进行深入的开发与控制。 考虑到JS脚本开发的使用较多,这里先先简单介绍如何用JS对...

    Web报表FineReport页面如何传递中文参数

    在使用报表开发工具FineReport设计web报表时,经常需要嵌入iframe到页面中,并给iframe的src属性指定报表地址的同时传递参数值。在参数值、参数名称以及报表名称中,如果包含中文字符或特殊字符,直接传递可能会导致...

    web,spring boot 集成帆软,finereport

    在本文中,我们将深入探讨如何将Web应用与Spring Boot框架集成帆软报表工具Finereport。Spring Boot以其简洁、高效和自动配置的特性,成为Java领域开发微服务和Web应用的首选框架。而Finereport作为一款强大的报表...

    FineReport报表工具填报专辑

    ### FineReport报表工具填报知识点详解 #### 一、FineReport报表工具概述 FineReport是一款由南京帆软软件公司开发的专业报表设计与分析工具,作为报表技术领域的领跑者,它不仅支持复杂的报表设计,还提供了丰富...

    移动端报表FineReport的JS开发示例

    FineReport是一个专业的报表工具,特别是在移动端报表开发中表现出色。本文针对FineReport在移动端的JavaScript(JS)二次开发给出了一些示例和说明。以下详细知识点涵盖了移动端报表开发中如何利用FineReport的JS...

    FineReport中JS如何自定义按钮导出

    FineReport支持多种不同的导出方式,直接使用FineReport内置导出按钮可以非常快捷方便的来对各种格式的输出,但是我们在web页面集成中的时候,往往只想将报表内容嵌入到iframe中,而工具栏以及工具栏上的按钮都会...

    finereport跨域打印文档

    【Finereport跨域打印文档】是指在使用帆软报表工具Finereport时,涉及到的在不同源(即跨域)环境下进行文档打印的技术说明。跨域打印是Web开发中的一个重要概念,通常涉及到浏览器的同源策略限制。由于安全原因,...

    如何修改FineReport报表平台中数据决策系统登陆地址

    ### 如何修改FineReport报表平台中数据决策系统登录地址 #### 背景介绍 在使用FineReport报表平台搭建数据决策系统时,可能会遇到系统自动生成的登录地址过长的问题,例如:`...

    Web报表工具JS开发之日期校验

    在报表开发过程中,我们常常需要对查询界面进行日期校验。例如有两个参数:开始日期和结束日期,我们要校验的是:开始日期与结束日期不能为空,结束日期必须在开始日期之后以及结束日期必须在开始日期后的某个时间段...

    Angular 中使用 FineReport不显示报表直接打印预览

    在开发Web应用时,有时我们需要集成报表功能,FineReport是一款常用的报表工具,它提供了与多种前端框架集成的能力,包括Angular。然而,在某些情况下,我们可能希望用户能够直接打印报表而无需先显示报表内容,这就...

    报表session与应用session常识普及

    通常的做法是在客户端页面中使用JavaScript的window.onclose事件来尝试在浏览器关闭时向服务器发送删除session的请求,然而这无法应对浏览器崩溃或进程被强行杀死的情况。 了解session的工作机制对于开发高效且安全...

    帆软fcra帮助树形文档.docx

    【帆软FCRA帮助树形文档】主要涵盖了帆软报表工具FineReport的多个核心知识点,以下将对这些关键内容进行详细解析: 1. **升级兼容说明**:在更新到10.0版本时,需要了解关于软件升级的兼容性问题,确保现有的功能...

Global site tag (gtag.js) - Google Analytics