Finereport-Layer Report solution to big Data set presentation problem

This paper takes the report as an example, through paging to solve the problem of large data set display.

The idea of implementation is to filter some database data in SQL so that the browser can display the report page reasonably. (data fragment, statement I use MySQL, if you want to use a different database, see the Finereport Help document)

Step one: Open the Fenye.cpt file.

The template interface is as follows

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/727049/201507/230941498962726.png "style=" border:0 px; "/>

Two DS, and part of the data, and a hidden line.

Hide the following line:

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/727049/201507/230942110214839.png "style=" border:0 px; "/>

The function of the data here will be mentioned below.

The contents of the DS1 are as follows

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/727049/201507/230942230998217.png "style=" border:0 px; "/>

Statement Content SELECT * from AAA limit ${f},${p}

The goal is to start with the ${f} jump, select ${p} data (this $p is the number of pages displayed, $f calculation can be the following formula ($page-1) * $p, the offset of the MySQL limit is starting from 0).

In the template parameters, I set their default values

650) this.width=650; "src=" http://images0.cnblogs.com/blog2015/727049/201507/230942448342743.jpg "style=" border:0 px; "/>

$P =20

$page = 1;

This is the same as the global parameter, in the template preview when the data is not visible, must be displayed on the page when the parameters are passed in through the URL.

The contents of the DS2 are as follows

650) this.width=650; "src=" http://images0.cnblogs.com/blog2015/727049/201507/230943008038231.jpg "style=" border:0 px; "/>

The simple statement is that the total number of pages can be calculated by dividing the total data by the page count.

Report Body

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/727049/201507/230943100998125.png "style=" border:0 px; "/>

The first row of data is the previous page, the next page, the total number of pages and the current page and A/, used in the toolbar to display the previous page and the next page, and so on, the normal is not displayed, so we first blocked (hidden). The other is the display of user data.

What else do we need to do to show the report as well as our regular reports?

650) this.width=650; "src=" http://images0.cnblogs.com/blog2015/727049/201507/230943223965800.jpg "style=" border:0 px; "/>

Here you need to write the code to achieve the effect.

Click to open the gear for the preview

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/727049/201507/230943332095664.png "style=" border:0 px; "/>

You can see that we've used 7 custom buttons and a Load End event

The code to load the end event is as follows:

var toolbar = Contentpane.toolbar;

var items = Toolbar.options.items;

var custombutton=items[2];//jquery take the button on our toolbar. Items[2] represents the third, which is the text box button that appears.

var inner = CustomButton. $table;

var btnwrapper = $ ("em", inner);

Btnwrapper.html ("<input data-role= ' None ' type= ' text ' class= ' fr-texteditor ' style= ' width:42px; height:16px; Text-align:center; ' > ");

Fix the button's properties, make it a text type, center, mouse over the last icon is the edit state.

var cellvalue = ContentPane.curLGP.getCellValue ("D1");//Gets the value of the D1 cell is the page, which is the current one.

var $input = $ ("input", btnwrapper);

$input. Val (cellvalue);//Copy the text control, using the JQuery method, you can copy.

var total=contentpane.curlgp.getcellvalue ("C1");

if (Total>parseint (total)) {Total=parseint (total) +1;

}

Contentpane.toolbar.options.items[4].settext (total);

Gross position pages are displayed on the 5th control, because this value may be a decimal number, so you should decide whether to add a handle.

Contentpane.toolbar.options.items[3].settext (ContentPane.curLGP.getCellValue ("E1"));

Write a slash on the 4th control.

7 Custom Buttons:

First home:

The code is as follows:

Window.location.href= "${servleturl}?reportlet=fenye.cpt&op=write&page=1";//link to fenye.cpt,page parameter = 1, which represents the first page.

Second previous page:

The code is as follows:

var page= $ ("tr[tridx=0", "Div.content-container"). Children (). EQ (0). html (); The first cell contents of the first row are taken.

if (page==0)

{

This.setenable (FALSE);

Alert ("The page exceeds the specified range");

}

Else

window.location.href= "${servleturl}?reportlet=fenye.cpt&op=write&page=" +page//if not less than 1 normal jump, Otherwise the display page exceeds the specified range, and this control setting cannot be used.

The third one can jump to the current page:

var toolbar = Contentpane.toolbar;

var items = Toolbar.options.items;

var custombutton=items[2];

var inner = CustomButton. $table;

var btnwrapper = $ ("em", inner);

var $input = $ ("input", btnwrapper);

Take this control

$input. blur (function () {

var toolbar = Contentpane.toolbar;

var items = Toolbar.options.items;

var custombutton=items[2];

var inner = CustomButton. $table;

var btnwrapper = $ ("em", inner);

var $input = $ ("input", btnwrapper);

var page= $input. Val ();

var total=$ ("tr[tridx=0]", "Div.content-container"). Children (). EQ (2). html ();

if (Total>parseint (total)) {Total=parseint (total) +1;

}

if (parseint (page) > parseint (total) | | parseint (page) < parseint (1))

{

Alert ("The number of pages you output is no longer in range");

}

Else

window.location.href= "${servleturl}?reportlet=fenye.cpt&op=write&page=" +page

});

If the value entered after losing focus is not within the specified range, the output page is not prompted if you jump to the specified page, just after the else URL. Losing focus means clicking somewhere else or clicking the TAB key.

A fourth slash:
This is handled in the load time. There is no need to deal with this.
Fifth total number of pages:
This is handled in the load time. There is no need to deal with this.
Sixth next page:
var page= $ ("tr[tridx=0", "Div.content-container"). Children (). EQ (1). html ();
var total=$ ("tr[tridx=0]", "Div.content-container"). Children (). EQ (2). html ();
Jquruy remove a page and total pages
if (Total>parseint (total)) {Total=parseint (total) +1;
}
Determine whether the total number of pages is not an integer, not plus one
if (parseint (page) > parseint (total))
{
This.setenable (FALSE);
Alert ("The number of pages exceeds the specified range");
}
Else
window.location.href= "${servleturl}?reportlet=fenye.cpt&op=write&page=" +page
If the next page jumps there in this range


This control is not available and there is an output error.
Seventh end of the page:
The code is as follows:
var total=$ ("tr[tridx=0]", "Div.content-container"). Children (). EQ (2). html ();
The total number of pages taken.
if (Total>parseint (total)) {Total=parseint (total) +1;
}
window.location.href= "${servleturl}?reportlet=fenye.cpt&op=write&page=" +total
Determine whether the total number of pages is an integer, not a plus, and jump to the last page.
The name of the display control needs to be added in the alias.

Finereport-Layer Report solution to big Data set presentation problem