JS使用说明

编辑
  • 文档创建者:印然
  • 浏览次数:22074次
  • 编辑次数:19次
  • 最近更新:明明1117 于 2019-04-19
  • 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+/,通过键盘操作一遍您需要的快捷方式,比如说,将自动补全的快捷方式更改为ctrl+Q,如下图,在弹出的快捷方式修改框中,先按住ctrl,然后按下Q键,快捷方式即已修改:

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




    附件列表


    主题: 二次开发
    如果您认为本文档还有待完善,请编辑

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

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