JS使用说明

编辑
  • 文档创建者:印然
  • 浏览次数:24151次
  • 编辑次数:21次
  • 最近更新:Kevin-s 于 2019-07-16
  • 1. 问题描述

    FineReport 报表采用 jQuery v1.9.1 框架,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\WebReport\WEB-INF\scripts\script.js。
    3).事件编辑界面

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


    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");

    4. 自动补全 JS

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

    4.1 启动自动补全功能

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

    4.2 修改快捷键设置

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

    4.3 效果查看

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




    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]