Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize "Click to View the original Picture" by the report tool

2025-02-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >

Share

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

On a variety of Web sites involving pictures, whether it is search for images, social networking, insurance services, and internal systems such as ERP or file management, pictures usually provide an operation to click on the picture to view the original image, that is, to present a small image at the beginning, and then click to enlarge the view. Can we do this in the report? What should I do if I can? Do you need a lot of knowledge about front-end pages?

Below I will answer the questions raised above one by one: drying the report can be achieved! Partial refresh through Dashboard+ hyperlink is OK! You don't need to know a lot of front-end knowledge to achieve it!

Next, we use the employee table in the demo data source that comes with the moistening designer to do a query for employee information. After clicking on the employee information, we display a picture of TA on the page and the original image on the right side of the page.

Creation of employee information table

Define parameters

In the "report" menu, select the "parameters" option, increase the parameter of arg1, the data type is a string, the value expression is 1 (after the given value expression, if you do not enter a value, the first query uses the parameter value), the parameter type is a normal parameter.

Dataset settin

Report format settin

The cell settings where the picture is located

Select the E2 cell, choose "report"-- "Picture" menu, or right-click the cell and select "Picture". In the pop-up dialog box, set the expression to = ds1. Pictures.

Hyperlink Settings

Set the hyperlink expression in the properties of the E2 cell, as shown in the following figure.

two。 A report that displays pictures

Define parameters

Define a common parameter named id, whose type is a string. The parameter name here should be the same as the parameter name passed by the hyperlink in the first report.

Dataset settin

For this report, we only need to find out the corresponding photo fields according to the employee's ID, so the sql here is also filtered through the parameter id.

Report picture cell settings

If we want to display a larger picture, you can directly set the size of the cell where the picture is located to "fill the cell with the picture", there is no need to set the height, width and other html properties of the picture.

3. Set layout

Create report groups, add employee information tables and reports that show the original diagram

Add parameter definition

Make a layout

In the new version of the dry report, the report group is displayed as tab pages by default. When the layout is set in the dashboard panel, multiple reports will be displayed according to the layout set by the dashboard panel.

Parameter query report

Define a dataset

To make this example look more realistic, we provide a drop-down box where users can directly select the employee's ID. First define the dataset for this parameter report.

Then define the controls and variable names for the drop-down selection of employee ID cells

Select the D2 cell and set the editing style to the drop-down dataset:

OK, through the above steps, we have completed a query for employee information through the drop-down box, and you can click on the picture in the card-like employee information table, and an example of the original photo of the employee is displayed on the right side of the current page. Come to the web to see the effect!

Of course, in response to such a requirement, we can also respond to the onclick event on the picture and pop up a web page window or dialog window. However, compared with the method mentioned in this article, this method needs to know more about the page. In the example in this article, we only need to use the local refresh JS function of dashboard to make the original image appear without flicker on a page.

Dashboardlink is of many uses. In addition to the examples in this article, we can also use it to drill province map data in the country map, link lists and charts on a page, and special query panel layout, all of which have been written on the blog. Pay more attention to us! I believe your attention will make us make more progress, and our progress will bring you more value!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Internet Technology

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report