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
作用机理:
设计模板时可以给控件、工具栏按钮、整个报表添加JS事件,每个事件对应一个function。当报表转为html页面时会将这些function加到html的头部head。当事件被触发时如点击按钮时,或者导出打印报表时,对应的function就会被执行。
引入现成的JS文件:
单个模板引入外部JS文件:分页预览、填报预览或者数据分析旁的设置图标,然后点击引用JavaScript;
报表工程下所有模板统一引入外部JS文件:服务器>服务器配置>引用JavaScript。
相对路径引用JS:相对于报表工程目录如WebReport,如WebReport\js下有引用的JS文件test.js,则相对路径为js/test.js;
绝对路径引用JS:如D:\tomcat\webapps\WebReport\WEB-INF\scripts\script.js。
事件编辑界面:
FineReport有统一的事件编辑界面,如按钮控件设置>事件编辑>添加点击事件便可看到事件编辑界面了,如下图:
1.2自定义页面中使用JS
通过获取iframe中的报表再使用FineReport的JS方法
如:报表嵌入在iframe的id为"reportFrame"时,调用报表的打印预览方法,代码如下:
1
|
document.getElementById( 'reportFrame' ).contentWindow.contentPane.printPreview();
|
引入FineReport的js文件再使用FineReport的JS方法
代码:
1
2
3
4
5
6
7
8
|
<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>
|
2. JS语法
2.1普通的JS语法
如在事件编辑里面弹出对话框,使用alert(要弹出内容)即可。
2.2 jQuery语法
jQuery的基础语法是:$("tr"),美元符号$定义jQuery;选择符("tr")就可以获取页面所在行。
更多jQuery方法请参考其官方jQuery Version 1.9.2 API文档。
2.3报表内置的JS方法
如何使用报表内部定义好的JS方法,可在事件编辑里面直接调用,如FR.doURLFlashPrint调用Flash打印,代码如下:
1
|
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开头的关键字:
Web报表工具FineReport中JavaScript的使用相关推荐
- web报表工具FineReport最经常用到部分函数详解
之前分别列出来了finereport常用的文本.时间函数的解释,这里应广大朋友的要求,整理了finereport最常用到的一些函数! SUM SUM(number1,number2,-):求一个指定单 ...
- web报表工具FineReport常用函数的用法总结(日期和时间函数)
web报表工具FineReport常用函数的用法总结(日期和时间函数) 说明:凡函数中以日期作为参数因子的,其中日期的形式都必须是yy/mm/dd.而且必须用英文环境下双引号(" " ...
- 企业级 WEB 报表工具——FineReport
官网地址:http://www.finereport.com/ 帮助文档地址:https://help.finereport.com/ 简介: FineReport 是帆软自主研发的企业级 web ...
- web报表工具FineReport的JS编辑框和URL地址栏语法简介
JS编辑框: 1.FineReport的js. 作为一款BS产品,browser端的JavaScript是必不可少的. FineReport中的js是已经调用了finereport.js的. 大家知道 ...
- web报表工具FineReport使用中遇到的常见报错及解决办法(三)
这里写点抛砖引玉,希望大家能把自己整理的问题及解决方法晾出来,Mark一下,利人利己. 出现问题先搜一下文档上有没有,再看看度娘有没有,再看看论坛有没有.有报错要看日志.下面简单罗列下常见的问题,大多 ...
- Web报表工具FineReport填报界面键盘操作
2019独角兽企业重金招聘Python工程师标准>>> 对于一张填报数据较多的报表,需要用户频繁地操作鼠标.而FineReport填报界面除去按钮类型的控件,其余可以完全使用键盘而不 ...
- Web报表工具FineReport二次开发JS之字符串
在报表开发过程中,有些需求可能无法通过现有的功能来实现,需要开发人员二次开发,以FineReport为例,可以使用网页脚本.API接口等进行深入的开发与控制. 考虑到JS脚本开发的使用较多,这里先先简 ...
- web报表工具FineReport常见的数据集报错错误代码和解释
在使用finereport制作报表,若预览发生错误,很多朋友便手忙脚乱不知所措了,其实没什么,只要看懂报错代码和含义,可以很快的排除错误,这里我就分享一下finereport的数据集报错错误代码和解释 ...
- web报表工具FineReport的SQL编辑框的语法简介
感谢大家捧场,这里继续分享关于SQL编辑框的一些语法心得总结,因为数据集定义的面板,也是FineReport报表中最常用的模块之一. 1.我理解的执行过程. 这里其实是生成一个字符串,FineRepo ...
最新文章
- FtpCopy数据定时自动备份软件(FTP定时备份)
- hibernate xml配置文件
- Pandas常用I/O(一)------read_csv(),read_table()
- ELF格式文件特点的简单说明
- SAP Kyma上都有哪些namespace?
- 黑客攻防技术宝典Web实战篇第2版—第10章 测试后端组件
- mysql temporary_mysql – 如何在同一个查询中多次引用TEMPORARY表?
- 0805封装尺寸/0402封装尺寸/0603封装尺寸/1206封装尺寸
- Android如何制作本地音乐播放器,简单实现Android本地音乐播放器
- css实现椭圆绕圈动画
- Windows10 + Anaconda(python3.6)安装labelling
- 2022年,北京将建设22.4公里的轨道交通
- d630 无线驱动 linux,DELL D630安装CentOS6的无线网卡驱动
- snf快速开发平台试用演示地址
- 雨落C++小课堂第二课——C++程序结构(2)
- 解决python同时执行多个程序的方案
- php 图片印章_php版圆形印章生成器
- 怎么利用计算机为学生成绩进行排名,使用excel为学生成绩排序的方法和步骤
- 嵌入式软件工程师—成长笔记#02
- OpenCv-C++-小案例实战-切边(二)
热门文章
- antd 能自适应吗_ACC自适应巡航能当自动驾驶用吗?答:不能
- 使用vux+ajax,Vue 应用中结合vux使用微信 jssdk的方法
- 计算机三级考试c,全国计算机等级考试——三级c语言机试答案
- 农大计算机学院姜新华,计算机学院红帽学院揭牌仪式
- wordpress android,WordPress for Android 2.0 试用记
- python画彩色城墙_Python绘制城堡-(有惊喜!!!)
- TX的8B/10B编码功能
- 遇见BUG(4)不要默认电平标准!
- Verilog HDL 使用规范(一)
- 探秘早期的FPGA内部构造