• Web报表工具FineReport中JavaScript的使用


    报表软件FineReport採用的是jQuery v1.9.2框架。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的一些基本使用。

    1. 怎样使用JS

    1.1 报表模板中使用JS

    作用机理:

    设计模板时能够给控件、工具栏button、整个报表加入JS事件,每一个事件相应一个function。当报表转为html页面时会将这些function加到html的头部head。当事件被触发时如点击button时。或者导出打印报表时,相应的function就会被运行。

    引入现成的JS文件:

    单个模板引入外部JS文件:分页预览、填报预览或者数据分析旁的设置图标,然后点击引用JavaScript。

    报表project下全部模板统一引入外部JS文件:server>server配置>引用JavaScript。

    相对路径引用JS:相对于报表project文件夹如WebReport。如WebReportjs下有引用的JS文件test.js,则相对路径为js/test.js;

    绝对路径引用JS:如D: omcatwebappsWebReportWEB-INFscriptsscript.js。

    事件编辑界面:

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


    1.2 自己定义页面中使用JS

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

    如:报表嵌入在iframe的id为"reportFrame"时。调用报表的打印预览方法,例如以下:

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

    引入FineReport的js文件再使用FineReport的JS方法

    代码:

    <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>

    要注意的是。假设该页面中引入了其它版本号的jquery.js,可能会有JS冲突,因此建议通过获取iframe中的报表再使用FineReport的JS方法

    2.JS语法

    2.1 普通的JS语法

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

    2.2jQuery语法

    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开头的keyword:









  • 相关阅读:
    window.open 子窗口关闭刷新父页面
    window.open打开新窗口报错ie 位指明错误,原因是window没有加引号!
    ORA-22922: 不存在的 LOB 值 可以使用外层嵌套wm_concat()解决
    子窗口打开父窗口
    页面加载时触发事件
    json
    orcale 函数wm_concat不存咋lob值使用zh_concat 替换
    mongo常见错误
    mongo中插入数据,出现id重复
    cpu占用率
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/7252791.html
Copyright © 2020-2023  润新知