Use of JavaScript in Web reporting tools Finereport

Reporting software Finereport uses the jquery v1.9.2 framework, jquery is a fast, concise JavaScript library that makes it easier for users to work with HTML documents, events, animations, Provides easy Ajax interaction for websites and is compatible with various browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). Finereport report resolves to become an HTML page, so you can use JS to do various processing of the report, you can choose to use all the methods of the jquery framework to manipulate the report. On this basis, Finereport also encapsulated a lot of built-in JS method, here I first introduce some basic JS use.

1. How to use JS

1.1 Using JS in report templates

Action mechanism:

When designing a template, you can add a JS event to a control, a toolbar button, an entire report, and each event corresponds to a function. These function are added to the head of the HTML header when the report is converted to an HTML page. When an event is triggered, such as when a button is clicked, or when a printed report is exported, the corresponding function is executed.

Introduction of Ready-made JS files:

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

All templates under the report project unify the introduction of external JS files: server > Server configuration > Reference JavaScript.

Relative path Reference JS: Relative to the report project directory such as Webreport, such as Webreport\js under the reference JS file test.js, the relative path is js/test.js;

Absolute path Reference JS: such as D:\tomcat\webapps\WebReport\WEB-INF\scripts\script.js.

Event editing Interface:

Finereport has a unified event editing interface, such as button control Settings > Event editing > Add click events to see the event editing interface, such as.

1.2 Using JS in custom pages

By obtaining the report in the IFRAME and then using the JS method of Finereport

For example, when the report is embedded in an IFRAME with an ID of "reportframe", the report's print preview method is called as follows:

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

Introduction of Finereport JS file and use of Finereport 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 depending on the situation      fr.dourlflashprint (URL ); }  

Note that if other versions of Jquery.js are introduced into the page, there may be JS collisions, so it is recommended to use the Finereport JS method by getting the report in the IFRAME

2.JS syntax

2.1 Normal JS syntax

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

2.2jQuery syntax

The basic syntax for jquery is: $ ("tr"), dollar sign $ definition jQuery, and the selector ("tr") to get the page's row.

For more jquery methods, please refer to their official jquery Version 1.9.2 API documentation.

2.3 Report built-in JS method

How to use the internal definition of the report JS method, can be called in the event editor directly, such as Fr.dourlflashprint call Flash printing, the code is as follows:

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

3. Auto-Complete JS

In the Finereport designer to use the JS statement to achieve a function, in order to avoid the 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:

3.2 Modifying shortcut key settings

The 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: Ctrl+space, through the keyboard to operate the necessary shortcuts, for example, Change the AutoComplete shortcut to Ctrl+q, for example, in the shortcut modifier box that pops up, hold down CTRL, and then press the Q key, and the shortcut is modified:

3.3 Effect View

Choose a place where you can enter the JS statement, 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, the shortcut key ctrl+q, in the lower right corner list all con start keywords:

Use of JavaScript in Web reporting tools Finereport