Use of JavaScript in Web reporting tools Finereport

Reporting SoftwareFineReportadopted is thejQuery v1.9.2Framework,JQueryis a quick, conciseJavaScriptLibrary to make it easier for users to handleHTML Documents,EventsTo animate and provide easy access to the websiteAJAXInteractive, and it is compatible with a variety of browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). FineReportafter the report is parsed, it eventually becomes aHTMLpage so you can use theJSvarious processing of the report, you can choose to useJQueryall the methods of the framework to manipulate the report. On this basis,FineReportIt also encapsulates a number of built -inJSmethod, here I will first introduceJSof some basic use.

1. How to use JS

1.1 use JS in report templates

mechanism:

when designing a template, you can add >js style= "font-family: ' The song Body '; > event, each event corresponds to a function html page these add to html The head of head function

Introduction of Ready- made JS File:

a single template introduces an external JS file: Page break preview, fill preview or settings icon next to data analysis, then click on the Reference JavaScript ;

All templates under the report project are uniformly introduced into the external js > server configuration javascript

relative path references js : Relative to report engineering directory such as webreport webreport\js js file test.js js/test.js

Absolute Path Reference JS : If D:\tomcat\webapps\WebReport\WEB-INF\scripts\script.js .

Event editing Interface:

finereport There is a unified event editing interface, such as button control settings Span style= "font-family: ' The song Body '; >> event edit >

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0115/7038 /d6005b00-64c6-3131-8690-96cb80f142e0.png "style=" border:0px; "/>
1.2  custom page use JS

by getting iframe finereport js method

such as: reports embedded in iframe of the ID to be "Reportframe" , the print preview method of the report is called, as follows:

document.getElementById (' Reportframe '). ContentWindow.contentPane.printPreview ();

introduce file and use js method

Code :

<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 ";//port and IP set fr.dourlflashprint (URL) According to the specific situation; } </script>

2. JS Syntax

2.1 Ordinary JS Grammar

if the dialog box pops up in the event editor, use the alert ( to eject content ) can be.

2.2 JQuery Grammar

jquery $ ("tr") $  jquery

more JQuery Please refer to the official jQuery Version 1.9.2 API documentation.

2.3 JS built into the report Method

How do i use the internal definition of a report? JS method, which can be called directly in the event editor, as Fr.dourlflashprint called Flash print the code as follows:

Fr.dourlflashprint ("Http://localhost:8075/WebReport/ReportServer?reportlet=gettingstarted.cpt");

3. Auto-complete JS

in the FineReport in the design of the use of JS statements to achieve a function, in order to avoid JS code input errors, provide the JS automatic completion function, the use of the following methods:

3.1 Start auto-complete function

Auto-completion is not performed by default in the designer, click File > options > Editor settings, tick the check box before default to perform this action, such as:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0115/7040/ 5ac35d11-5749-3335-8919-4a728d1f1f23.png "style=" border:0px; "/>

3.2 Modify shortcut key settings

Designer built-in JS Auto-complete shortcut keys for ctrl+space, but the computer is different, set the shortcut keys are different, the default shortcut keys may have been occupied, at this time, you need to modify the shortcut, double-click the Auto-complete shortcut key:ctrl+space, Use the keyboard to work through the required shortcuts, for example, to change the AutoComplete shortcut to Ctrl+q, for example, in the pop-up shortcut modifier box, first hold down Ctrl, and then press the Q Key, the shortcut has been modified:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0115/7042/ C80f3fb1-0cb5-3292-bb7f-d537c421a3a6.png "style=" border:0px; "/>

3.3 Effect View

feel free to choose one where you can enter JS statement where, for example, select the cell, right-click the control settings, tap event Edit, add an initialization event, enter con in the right JS input Box ,and then, Operation shortcut key Ctrl+q, In the lower right corner, list all the keywords that start with con:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0115/7044/ B0ac6b74-d452-3a20-af3f-652dd4680fef.png "style=" border:0px; "/>

Use of JavaScript in Web reporting tools Finereport