Java a Web report control that can be seamlessly integrated with the SSM framework

The master suite runs on the client (browser) and is independent of the application server (application Server) technology, so it can be used exclusively for the Java EE,
Web application products developed by ASP.
The master suite is deployed on the server and supports all Web servers, including Tomcat, IIS, and WebSphere.

The master suite itself is developed in C/D + + with unmatched performance. For Chrome, Firefox, the Shuo Suite is a Mozilla-compliant
NPAPI specification of the plug-in plugin; for IE, the master suite is a standard ActiveX control.

The master suite is powerful and small in size, with a total download capacity of 1MB (all functional components including plugins/add-ons).

The master suite works in a pure Windows environment and does not require a support environment such as the. NET FrameWork and Java.
The Shuo Suite supports all Windows-series operating systems after Windows XP (including Windows XP).

The Add-ons (FireFox) and add-ons (IE) are signed by the internationally renowned VeriSign company code to ensure that the product is safely and unhindered
Download and run automatically.

Shuo Suite All Unicode encoding, built-in text containing Chinese Simplified, traditional (BIG5), English, and support dynamic switching, to meet the national
The need for international applications.

Shuo Zheng Kit fully absorbed the PowerBuilder DataWindow, ExtJS, DevExpress, Delphi and other development tools design thinking
Developed by experienced, C + + developers. Master suite has been successfully applied to a number of large enterprises, multinational software companies,
Withstood the test of thousands of end users, rarely due to memory leaks or other causes of browser crashes, it turns out that Shuo
The positive package is stable, safe and reliable.

In my newly developed project, I need a Web control that allows users to customize the report (many report controls are found on the site, such as high-quality reporting controls such as Finereport, but are all CS-based products. And what I want now is a BS can be integrated with the main framework of the SSM, such as the report control, so selected Supcan report).

Attached below:

The use of the method in the Supcan1.0.103.0.chm is clearly written, the project developer can be set according to their own needs, the reference method in the project:

<script src= "${ctxstatic}/supcan/dynaload.js" type= "Text/javascript" ></script><script src= "${ Ctxstatic}/supcan/supcan.min.js "type=" Text/javascript "></script><script type= ' text/javascript ' src= ' ${ctxstatic}/res/nstd.js ' ></script>

First of all, we will need to introduce the JS file, Shuo is a custom report is a Onready method for the initial load:

function Onready (ID)         {          Fm.func ("Build", "${ctxstatic}/supcan/report/report4.xml");          Fm.func ("Callfunc", "301\r\n3");         

Then add the following code where you need to introduce the report:

<script>             insertreport (' FM ', ' main=102,1074,105,100,20,32,106,107; print=; Undoable=false; border=single,3d; property=301,2,112,192,144,478,274 ', ' 700px ')        </script>

Now we can see that the report has been successfully introduced into the project.

But the newly loaded report controls are still empty, so let's take a look at how to create a new report.

A new report

　　

Here we can set up the new report format and generate a new one.

There is nothing in the new report, so how do we insert the data from the database into the report in the background?

Here we need to introduce the function of the data source.

Two Create a data source

Create a new temporary data source with XML, JSON format and other files to store the data, in my project, I set up a button for creating a report, Through Ajax in the background to convert the required data into a JSON format into a local Xxx.json format of the file, so that the report is loaded, I can directly choose this file as the data source in my project.

The specific code flow is as follows:

<input id= "btnsubmit" class= "btn btn-primary" onclick= "GetReport ();" type= "button" value= "Create report"/>

  function GetReport () {                        $.ajax ({                URL:"${ctx}/weather/factweathercn/report",                type:' get ',                datatype:' json ',                success:function(data) {                                    }            });                    

The controller layer generates the JSON file code:

/*** Background Display report data *@version2017-07-08*/@RequiresPermissions ("Weather:factWeatherCn:view") @RequestMapping (value= "Report") @ResponseBody PublicString Report (FACTWEATHERCN FACTWEATHERCN, httpservletrequest request, httpservletresponse response, model model) { Page<FactWeatherCn> page = Factweathercnservice.findpage (NewPage<factweathercn>(Request, response), FACTWEATHERCN); Model.addattribute ("Page", page); Objectmapper Mapper=NewObjectmapper (); //Convert object to JSON stringString jsonstr = ""; Try{jsonstr=mapper.writevalueasstring (Page.getlist ()); } Catch(jsonprocessingexception E1) {//TODO auto-generated Catch blockE1.printstacktrace (); } OutputFormat OutputFormat=Outputformat.createprettyprint (); Outputformat.setlineseparator ("\ r \ n");//This is for a newline operation.writer writer; Try{writer=NewFileWriter ("F:/dom4jtest.json"); XMLWriter OutPut=NewXMLWriter (Writer,outputformat);                 Output.write (JSONSTR);              Output.close (); } Catch(IOException e) {//TODO auto-generated Catch blockE.printstacktrace (); }                  return""; }

The above code because it is the integration of my project, the data has encapsulated Page class page, not suitable for direct copy use, when everyone in use, you only need to send their own data JSON string through the code of the generated JSON file code block locally generated a copy of the Xxx.json file.

I created a Dom4jtest.json file on the F-drive.

So we have the data source to choose from.

Create a new temporary data source and select the JSON file that we just generated, click the Toolbox icon to open a tool window on the right side of the report, as shown in.

At this point we are free to drag and drop data and customize the report.

Java a Web report control that can be seamlessly integrated with the SSM framework