Jumping to a Specific Row by Clicking the Drop-down Box Widget

Version

Expected Effect

Since it is not easy to view the backward data of a report with a large amount of data on one page, you may want to jump to a specific row by the corresponding number, as shown in the following figure.

Implementation Method

You can position the element with the corresponding ID by using HTML anchor links.

Data Preparation

Choose File > New General Report in the upper left corner, and create a database query ds1 with the SQL statement SELECT * FROM PersonnelRoster LIMIT 200, as shown in the following figure.

Report Design

Basic Table Design

1. Enter the text Jump to in cell A1, add a Drop-down Box Widget to cell B1, and enter the text Row in cell C1.

2. Enter ID in cell A2, and enter the titles corresponding to the fields in the dataset in cells B2 to F2.

3. Drag the corresponding fields into cells B2 to F2.

The following figure shows the effect.

ID Cell Attribute Setting

1. Select cell A3, choose Cell Element > Insert Formula, and enter the formula =seq().

Formula description: seq() returns the number of times the function has been executed in the entire report execution process. For details, see Sequence Number.

The following figure shows the effect.

2. Select cell A3, choose Cell Attribute > Expansion, and set B3 as the left parent cell to execute the formula according to the value in cell B3, as shown in the following figure.

3. Select cell A3, choose Cell Attribute > Display, select Formula Form: ="<span id='"+$$$+"'>"+$$$+"</span>" to define the HTML tab by the formula, and jump to the position of the specific number by JS.

Note: 

Since the HTML anchor link is used in this example, you need to change the value to HTML formula form in Display.

4. Select cell A3, choose Cell Attribute > Others > Advanced, and select Display by HTML as the value of Display Content, as shown in the following figure.

Drop-down Box Widget Setting

1. Select cell B1, click the Widget Setting icon on the right attribute panel, select Drop-down Box Widget, select Formula as the data dictionary type, and enter =RANGE(200) as the actual value.

Formula description: range(200) returns a sequence of integers from 1 to 200.

The following figure shows the steps.

2. Add an After Editing event to the widget, and the content of the event is to jump to the position where the number entered in the widget is located, as shown in the following figure.

The JavaScript code is as follows:

 location.href = "#"+this.value;

 Freeze No.1 Row Setting

Choose Template > Repeat/Freeze > Data Entry Preview, set Freeze No.1 Row to No.1 Row so that the first row won't be topped when you click to jump to another row, making it easier to jump again, as shown in the following figure.

Effect Display

PC

Save the report and click Pagination Preview. The effect is the same as that shown in section "Expected Effect."

Mobile Terminal

The effect cannot be previewed on mobile terminals.

 For details, you can download the template Jumping to a Specific Row by Clicking.cpt