Analysis on the use of JavaScript in Web report tool FineReport

Analysis on the use of JavaScript in Web report tool FineReport

The report software FineReport uses the jQuery v1.9.2 framework. jQuery is a fast and concise JavaScript library that allows users to conveniently process HTML documents and events to achieve animation effects, it facilitates AJAX interaction for websites and is compatible with various browsers (IE 6.0 +, FF 1.5 +, Safari 2.0 +, and Opera 9.0 + ). FineReport reports are parsed and eventually become an html page. Therefore, you can use JS to process the reports. You can use all the methods of the jQuery framework to operate the reports. On this basis, FineReport also encapsulates many built-in JS methods. Here I will first introduce some basic usage of JS.

1. How to Use JS

1.1 Use JS in Report Templates

Mechanism:

When designing a template, you can add JS events to controls, toolbar buttons, and the entire report. Each event corresponds to a function. When the report is converted to an html page, these functions are added to the head of the html page. When an event is triggered, such as clicking a button or exporting and printing a report, the corresponding function is executed.

Introduce ready-made JS files:

A single template introduces an external JS file: Click the setting icon next to Page Preview, report preview, or data analysis, and then click reference JavaScript;

All templates in the Report Project uniformly introduce external JS files: Server> server configuration> reference JavaScript.

Relative Path reference JS: relative to the report project directory such as WebReport, for example, if there is a referenced js file test. JS under WebReport \ 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 page:

FineReport has a unified event editing interface, such as button control Settings> event editing> adding and clicking events, you can see the event editing interface, as shown in.

 

 

1.2 use JS in custom pages

Use FineReport's JS method after obtaining the report in iframe

For example, when the report is embedded in the iframe with the id "reportFrame", the print preview method of the report is called as follows:

 

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

 

Introduce the FineReport js file and then use the 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 "; // set FR. doURLFlashPrint (url) based on the actual situation;} </script>

 

Note that if other versions of jquery. js are introduced to this page, JS conflicts may occur. Therefore, we recommend that you use FineReport's JS method by obtaining the report in iframe.

 

2. JS syntax

2.1 common JS syntax

For example, in the event editing dialog box, use alert (to bring up the content.

2.2jQuery syntax

The basic syntax of jQuery is: $ ("tr"), dollar sign $ defines jQuery; select the character ("tr") to get the row of the page.

For more jQuery methods, see the official jQuery Version 1.9.2 API documentation.

2.3 built-in JS method for reports

How to Use the JS method defined in the report can be directly called in the event editing, such as FR. doURLFlashPrint calling Flash printing. The Code is as follows:

FR.doURLFlashPrint("http://localhost:8075/WebReport/ReportServer?reportlet=gettingstarted.cpt");

3. Automatically complete JS

When using JS statements in the FineReport designer to implement a function, to avoid JS code input errors, the automatic JavaScript complementing function is provided as follows:

3.1 enable auto-completion

By default, the auto-completion function is not executed in the designer. click File> Options> editor settings, and select the check box before the default operation, such:

3.2 modify shortcut key settings

The built-in JS auto-completion Shortcut Key of the designer is ctrl + space. However, different computer keys have different shortcut keys, and the default shortcut keys may have been occupied. In this case, you need to modify the shortcut key and double-click the auto-completion shortcut key: ctrl + SPACE: Use the keyboard to perform operations on the required shortcuts. For example, change the automatically completed shortcut to ctrl + Q. For example, in the pop-up shortcut modification box, press ctrl and then press Q. The shortcut is changed:

 

3.3 view results

Select a place where you can enter JS statements. For example, select a cell, right-click control settings, click event edit, add an initialization event, and enter con in the JS input box on the right. Then, the shortcut key ctrl + Q is used to list all the keywords starting with con in the lower right corner: