Shulou(Shulou.com)06/01 Report--

This article shows you how the picture fields in the database are presented in the report, the content is concise and easy to understand, and can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

When we view some data on the web side, in order to facilitate users to understand the calculation method of the data, some hints will appear when the mouse is pointing to the grid, and the prompt will not be displayed when the mouse is moved away, for example, when the mouse points to the page button, there is a prompt for button function, this effect can be easily achieved in the drying, and there are corresponding documents that describe how to do the prompt when the mouse hovers over.

In addition to the static information mentioned above, you can also point the mouse to display the corresponding dynamic data in the drying report, and you can also achieve the effect of pointing the mouse to display the picture.

Here, taking the student information table as an example, the mouse points to the photos of different people, and the corresponding large picture can be displayed next to it.

Concrete realization method to make a student information table

The basic personnel information stored in the database is in a record, and our common personnel information table displays the data in a record in different rows. The format of this kind of report is more casual than the web format report. We call it a free report. About how to achieve free format report can be referred to.

How the picture field in the database is rendered in the report (picture field is rendered).

The report template design is shown in the following figure

Increase the layer of the picture to be displayed

Append a column to the report, merge J2~J6 cells, and set the merged J2 cell data type to html, with the contents of the cell as follows:

= "

Personnel information high-definition uncrowned ID photo

"

Add the style of the layer when you hover over the page

Add the following styles to showReport.jsp:

# sjbb_hover {padding: 10px 10px 10px 10px; border-radius: 3px; box-shadow: 0px 0px 2px # ccc; background: # fff; color: # 000; position: absolute; text-align: center; display: inline-block; left: 532px; top: 47px;} JS method for adding layers to the page $("# sjbb_hover"). Hide () Function show () {$("# sjbb_hover") .show ();} function hide () {$("# sjbb_hover") .hide ();}

Check H2 and set the HTML event to >

After the above settings, we have completed the requirement of hovering over the mouse to display pictures.

The effect can be seen in the browser through the http://localhost:6868/demo/reportJsp/showReport.jsp?rpx= student information table. RPX.

When you turn the page to view another person's information, the mouse points to the corresponding person's photo.

Through this setting, we can also achieve mouse pointing and display a QR code, and users can scan the QR code on the phone to see more information they need to know on the phone.

The above is how the picture fields in the database are rendered in the report. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.