Finereport report Tools Built-in JS use of the Five

Source: Internet
Author: User
parameter control dynamic display

When using the Finereport reporting tool, because of business needs, in many cases, when a condition is met, some query conditions are displayed, and the parameter control needs to dynamically control whether it is visible.

Control the Visible (), invisible () property of the control for its visual, non-visual

var [Widget] = Form.getwidgetbyname ("[Paraname]"); To get a control from a control name

[Widget].visible (); Set the control to visible

[Widget].invisible (); Set the control to be invisible

Instance:

The instance implements the effect: when you select Daily, a date query control appears on the right, and when you select the monthly report, the user chooses the year, for example, March 2008, when the annual report is selected, that is, let the user select the years.

1. Template Design

1.1 New report

1.2 Adding data sources

Create a new database query named DS1, SQL statement:

SELECT Equipment,amount,costs,updatetime,equipmentid

From Equipmentdetail

where 1=1

${if (type= ' daily "," and Format (updatetime, ' yyyy-mm-dd ') = ' "+ Date +" ' "," ")}

${if (type= ' Monthly Report ', "and month (updatetime) =" + month + "and year (updatetime) =" + year, "")}

${if (type= ' annual Report ', "and year (updatetime) =" + year, "")}

Which sets the default value of the parameter type daily, the default value for data is the string 2009-01-13

1.3 Template Design

The template style is as follows

2.4 Bound data columns

Data column binding according to the following table

2.5 parameter Design

2.5.1 Open the parameter design interface, the parameter interface layout is as follows

2.5.2 Control Settings

L Type Control settings

Right-click the type control, select control Settings , open the Control Settings panel, control type is a drop-down box, control name Select type, custom data, as shown in the following illustration

L Date Control Settings

Right-click the control for date, select control Settings , open the Control Settings panel, control type is date, control name Select Date, custom data, as shown in the following illustration

L Year Control settings

Right-click the year's control, select the control settings , open the Control Settings panel, control type is Drop-down, control name selection year, use formula, Dyear control is the type to determine whether he needs to display, and our default type is daily, so the default setting it is not visible , as shown in the following figure

 

L Month Control settings

Right-click the month control, select the control Settings , open the Control Settings panel, the control type is a Drop-down box, the control name Select Month, customize the data, and set to invisible, as shown in the following illustration

2. Event editing

Right-click the type control, select the control Settings , open the Control Setup Panel, and add the edited event, as shown in the following illustration:

Add the following code in function Fun () {}:

var form = This.options.form;

var datewidget = form.getwidgetbyname ("date");

var yearwidget = Form.getwidgetbyname ("year");

var monthwidget = form.getwidgetbyname ("month");

var value = This.getvalue ();

if (value = = "Daily") {

Datewidget.visible ();

Yearwidget.invisible ();

Monthwidget.invisible ();

}else if (value = "Monthly Report") {

Datewidget.invisible ();

Yearwidget.visible ();

Monthwidget.visible ();

}else if (value = "Annual Report") {

Datewidget.invisible ();

Yearwidget.visible ();

Monthwidget.invisible ();

}else{

Datewidget.invisible ();

Yearwidget.invisible ();

Monthwidget.invisible ();

}

Description: The role of this code is to select a daily, then a date selection box below it; When choosing a monthly report, let the user choose the year, for example March 2008; The annual report is the same as the Monthly bulletin, which allows the user to select years.

3. Save and preview

Default to daily, only display date control, preview effect as shown

When the monthly report is selected, the Month and year dropdown box appears on the right, and the preview effect is as shown

When you select the annual report, the right pop-up year Drop-down box, preview effect as shown

Article from: http://ajavareport.cn/archives/450

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.