Web报表工具FineReport的JS API开发(二)

简介:

上次介绍FineReport的JS API中的第一类开发--FR,这次就来介绍一下FS和contentWindow类的开发。

1 FS

FS是数据决策系统中的js接口,比如说FS.tabPane.addItem,先介绍几类操作:

1.1 FS.Trans.signOut()

退出决策平台系统

1.2 FS.tabPane._doCloseTab(FS.tabPane._getSelectedTab())

关闭当前决策平台的标签

1.3 FS.tabPane.addItem({title:"baidu",src:"http://www.baidu.com"})

在决策平台中打开新标签页

1.4示例

前面两个接口很简单,这里不再举例说明,下面详细介绍一下第三个接口,即在数据决策系统中打开一个新tab。

1.4.1 描述

数据钻取是使用超级链接实现,打开方式有三种,当前窗口,对话框,新窗口。前面2种方式很好理解,第三种在新窗口中打开,即在浏览器端打开一个新的tab页面,如果是在数据决策系统中使用,希望实现在决策系统框架下新增一个tab页签,而不是在浏览器端重新打开一个窗口,这个该怎么实现呢?

1.4.2 模板

下面以%FR_HOME%\demo\basic\DetailedDrillA.cpt为例,该模板中实现了在当前窗口的钻取功能,下面将在当前窗口打开换成在新的tab页面中打开。

1.4.3 超级链接

 

打开模板,进入A4单元格的超级链接设置界面,如下图:


将订单明细的钻取修改成在数据决策中打开一个新的tab页面,新tab页面的标题为订单明细。

 

新增一个JavaScript的超级链接,添加参数ID,参数值为当前单元格的值,即ID=$$$,如下图:




通过

1
window.parent.FS.tabPane.addItem({title: "baidu" ,src: "http://www.baidu.com" })

 

 实现在新的tab中打开页面。

title:订单明细

src:订单明细模板的路径

 

具体如下图:



 

这里要注意,src最后的&符号为参数的传递,即将当前单元格的值传递给参数ID,然后再src的路径后面拼接字符串,将ID参数的值传递给需要打开的新模板中的订单号参数。

代码如下:

1
window.parent.FS.tabPane.addItem({title: "订单明细" ,src: "${servletURL}?reportlet=demo/basic/DetailedDrillB.cpt&订单号=" +ID})

1.4.4 效果查看



 

2 contentWindow

2.1介绍:

contentWindow是在web页面集成的时候,将FineReport报表嵌入在iframe中,调用报表对象时使用的接口,比如说:document.getElementById('reportFrame').contentWindow,其中document.getElementById('reportFrame')是获取iframe对象,contentWindow是报表对象,相当于html中的window对象。

在普通模板的JS脚本中可以直接使用contentWindow下的属性,如直接使用contentWindow中的contentPane,而不用写contentWindow,这是因为js脚本本身就在FR模板中执行。

网页中使用iframe嵌入报表,如果文档包含框架(frame或iframe标签),框架中嵌入了FR报表,则会创建一个contentWindow对象先获取iframe,再调用contentWindow,然后使用contentWindow下面的属性

1
var  contentWindow = document.getElementById( "reportFrame" ).contentWindow.XXX;

不论是web页面集成里面还是直接在FR模板之中,contentWindow下面最常用的属性当属contentPane,所以下面将详细介绍contentPane。

contentPane是contentWidow下面的最常用的一个属性,为存放报表内容的容器。

2. 2引用contentPane

在普通模板的JS脚本中直接使用contentPane就能获取到该对象。

如果报表嵌在网页的iframe中,首先在iframe中获取contentWindow,然后获取属性contentPane对象,如下:

1
var  contentPane = document.getElementById( 'reportFrame' ).contentWindow.contentPane;

比如,需要在网页中获取报表填报页面的一个按钮,并执行点击事件: 

1
document.getElementById( 'reportFrame' ).contentWindow.contentPane.getWidgetByName( '控件名' ).fireEvent( 'click' )

FineReport的填报预览及表单预览下contentPane下都会有一个curLGP对象,即current logicpane。

2.3 引用curLGP

在cpt模板的JS脚本中可以使用contentPane.curLGP来获取该对象。

如果报表嵌在网页的iframe中,在iframe外获取curLGP对象如下:

1
var  contentPane = document.getElementById( 'reportFrame' ).contentWindow.contentPane.curLGP;

2.4 write

填报预览时,curLGP下有一个write对象。

2.4.1 引用write

在cpt模板的JS脚本中可以使用contentPane.curLGP.write来获取该对象。

如果报表嵌在网页的iframe中,在iframe外获取write对象如下:

1
var  contentPane = document.getElementByID( 'reportFrame' ).contentWindow.contentPane.curLGP.write;

2.5 form

表单预览或参数界面,都有一个form对象。

2.5.1引用form

在cpt模板的JS脚本中可以使用this.options.form来获取该对象,如获取参数界面下拉框p1这个控件:

1
var  widget= this .options.form.getWidgetByName(p1)

如果报表嵌在网页的iframe中,在iframe外获取form对象如下:

1
var  contentPane = document.getElementByID( 'reportFrame' ).contentWindow.contentPane.curLGP.form;




本文转自 雄霸天下啦 51CTO博客,原文链接:http://blog.51cto.com/10549520/1754295,如需转载请自行联系原作者
相关文章
|
26天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
130 45
|
7天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
21 2
|
14天前
|
JSON JavaScript API
深入浅出Node.js:从零开始构建RESTful API
【10月更文挑战第39天】 在数字化时代的浪潮中,API(应用程序编程接口)已成为连接不同软件应用的桥梁。本文将带领读者从零基础出发,逐步深入Node.js的世界,最终实现一个功能完备的RESTful API。通过实践,我们将探索如何利用Node.js的异步特性和强大的生态系统来构建高效、可扩展的服务。准备好迎接代码和概念的碰撞,一起解锁后端开发的新篇章。
|
21天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
37 1
|
25天前
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
39 4
|
24天前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
27天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
37 2
|
18天前
|
JavaScript 前端开发 NoSQL
深入浅出:使用Node.js构建RESTful API
【10月更文挑战第35天】在数字时代的浪潮中,后端技术如同海洋中稳固的灯塔,为前端应用提供数据和逻辑支撑。本文旨在通过浅显易懂的方式,带领读者了解如何利用Node.js这一强大的后端平台,搭建一个高效、可靠的RESTful API。我们将从基础概念入手,逐步深入到代码实践,最终实现一个简单的API示例。这不仅是对技术的探索,也是对知识传递方式的一次创新尝试。让我们一起启航,探索Node.js的奥秘,解锁后端开发的无限可能。
WK
|
27天前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
47 0
|
设计模式 Web App开发 存储
移动 Web 开发的10个优秀 JavaScript 框架
选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地达到他们的开发目标。这些预实现的组件采用优秀的设计模式和最佳实践,促进应用程序以标准化的方式开发。最重要的是,它让开人员在开发过程中得心应手。
518 0
移动 Web 开发的10个优秀 JavaScript 框架