JS implementation Click the Parameters panel button to show or hide data

Source: Internet
Author: User

When you have too much data listed in the report, you want to hide detail data by displaying the buttons to show only statistics. As an example, how to implement it? This article takes Finereport as an example to tell how JS implements the Click Parameter Panel button to show or hide data.

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0123/5522/ 513259b8-12f1-34b1-8341-2d62024530e1.gif "style=" border:0px; "/>

Open Report

Add a Label control to the Parameters panel, the control is named Lable, the label control is not visible, and the control value is show.

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0123/5524/ 2a1466fa-cd08-3db3-bb46-73eea1768e7c.png "style=" border:0px; "/>

Add a button control to the Parameters panel, the control is named button, the control value is "show totals only," and a click event is added.

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0123/5526/ 5f13d16b-9232-38bc-acd8-7d123f3249db.png "style=" border:0px; "/>

Edit the Click event and add the following JavaScript code:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0123/5528/ Eaa303aa-ae28-3fe7-ae2f-281155aaf164.png "title=" Click to view the original size picture "width=" "height=" 531 "style=" border:0px; "/>

/* gets the value of the hidden label control */
var label= this.options.form.getWidgetByName ("label"). GetValue ();

/* Determine the value of the Label control */
if (label== ' display ')
{
/* When the value of the label control is displayed, it is hidden and the button name is changed to show all data */
This.options.form.getWidgetByName ("label"). SetValue ("hidden");
This.options.form.getWidgetByName ("button"). SetValue ("Show All Data");
}
Else
{
/* When the value of a Label control is not displayed, it is displayed instead, and the button is modified to show only aggregate data */
This.options.form.getWidgetByName ("label"). SetValue ("display");        
This.options.form.getWidgetByName ("button"). SetValue ("Show aggregate data Only");
}

/* Execute query */
_g (). Parametercommit ();

Click on the Parameters panel in the blanks and remove the "Do not show report content before clicking Query" property.

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0123/5530/ Cfe681ce-5701-39e3-9a4d-c0aa97a72b6f.png "style=" border:0px; "/>

Back to the report design interface, right-B3 the cell, add the conditional attribute, set the row height to 0 millimeters, add the formula condition to $label = ' hide '.

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0123/5532/ F7117250-03a3-3c67-abba-a852409fb66a.png "style=" border:0px; "/>

Save the template and click the page preview to see the effect.


JS implementation Click the Parameters panel button to show or hide data

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.