历史版本33 :JavaScript脚本 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 问题描述编辑

FineReport 报表采用 jQuery 框架，jQuery 是一个快速的，简洁的 JavaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，方便地为网站提供 Ajax 交互，并且它兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。FineReport 报表解析后最终成为一个 HTML 页面，因此可以使用 JS 对报表进行各种处理，您可以使用 jQuery 框架的所有方法对报表进行操作，在此基础上，FineReport 还封装了很多内置的 JS 方法。本节我们就 JS 的基本使用做一个介绍。

2. 如何使用 JS编辑

2.1 报表模板中使用

1）JS 作用机理

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

  • 单个模板引入外部 JS 文件：菜单栏点击模板>模板 Web 属性>引用 JavaScript

  • 报表工程下所有模板统一引入外部 JS 文件：菜单栏点击服务器>服务器配置>引用 JavaScript

  • 相对路径引用 JS：相对于报表工程目录如 webapps，如webapps\webroot\help下有引用的 JS 文件 demo.js

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

3）事件编辑界面

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

Snag_151f9629.png

2.2 自定义页面中使用 JS

1）通过获取 iframe 中的报表再使用 FineReport 的 JS 方法

如：报表嵌入在 iframe 的 ID 为"reportFrame"时，调用报表的打印预览方法，如下：

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

2）引入 FineReport 的 JS 文件再使用 FineReport 的 JS 方法：

<script type="text/javascript" src="/webroot/decision/view/report?op=resource&amp;resource=/com/fr/web/jquery.js"></script> 
  <script type="text/javascript" src="/webroot/decision/view/report?op=emb&amp;resource=finereport.js"></script> 
  <script type="text/javascript"> function doPrint(){ var url="http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt";//端口和ip根据具体情况设定 FR.doURLFlashPrint(url); } </script>

注：若该页面中引入了其他版本的 jQuery.js，可能会有 JS 冲突，因此建议您通过获取 iframe 中的报表再使用 FineReport 的 JS 方法。

3. JS 语法编辑

3.1 普通的 JS 语法

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

3.2 jQuery 语法

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

更多 jQuery 方法请参考：jQuery 文档

3.3 报表内置的 JS 方法

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

FR.doURLFlashPrint("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");

注1：10.0设计器和部署包使用的都是 OpenJDK，而使用 OpenJDK 无法启动 Flash 打印，但使用 Oracle/Sun JDK 可以。

注2：Flash 打印目前是已经被淘汰了的技术，很多浏览器都将不再支持 Flash 打印，建议客户使用零客户端或本地打印。

4. 自动补全 JS编辑

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

4.1 启动自动补全功能

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

4.2 修改快捷键设置

设计器内置 JS 自动补全快捷键为 Alt+/，但是由于不同电脑，自己设置的快捷键不同，默认快捷键可能已经被占用，此时，需要修改快捷方式，双击自动补全快捷键：Alt+/，通过键盘操作一遍您需要的快捷方式，比如说，将自动补全的快捷方式更改为Ctrl+Q，如下图，在弹出的快捷方式修改框中，先按住 Ctrl，然后按下Q键，快捷方式即已修改：
Snag_152800e3.png

4.3 效果查看

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

Snag_1529d506.png