JS實現點擊參數面板按鈕顯示或隐藏數據

1.1 問題描述

當報表中列表數據太多時，想通過顯示按鈕隐藏明細數據只顯示統計數據。如下圖示例，該如何實現？

1.2 實現思路

通過 JavaScript 修改參數控件的值，單元格中添加條件屬性，根據參數值顯示或隐藏相應的行。

2.1 準備模板

準備内置模板： %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\GroupReport\Group_2.cpt

點擊可下載模板：Group_2.cpt

模板樣式如下圖所示：

2.2 添加控件

1）在參數面板添加一個「标簽控件」，控件名爲 label，設置标簽控件不可見，默認控件值爲 顯示。如下圖所示：

2）在參數面板添加一個「按鈕控件」，控件名爲 button，控件值爲 只顯示合計數據 。如下圖所示：

2.3 添加事件

選擇 button 控件，爲其添加一個「點擊」事件，事件内容爲點擊按鈕時改變标簽控件的值并修改按鈕名稱，如下圖所示：

JavaScript 代碼如下：

/*獲取隐藏的标簽控件的值*/
var label= this.options.form.getWidgetByName("label").getValue();
/*判斷标簽控件的值*/
if(label=='顯示')
{
/*當标簽控件的值爲顯示時，則改爲隐藏，并修改按鈕名稱爲顯示所有數據*/
this.options.form.getWidgetByName("label").setValue("隐藏");
this.options.form.getWidgetByName("button").setValue("顯示所有數據");
}
else
{
/*當标簽控件的值不爲顯示時，則改爲顯示，并修改按鈕名稱爲只顯示合計數據*/
this.options.form.getWidgetByName("label").setValue("顯示");        
this.options.form.getWidgetByName("button").setValue("只顯示合計數據");
}
/*執行查詢*/
_g().parameterCommit();
顯示代碼

2.4 添加條件屬性

回到報表設計界面，右鍵 B3 單元格，爲其添加「條件屬性」，設置行高爲 0 毫米，添加公式條件爲$label = '隐藏'，即在label 标簽值爲隐藏時，隐藏 B3 單元格 ，否則，顯示 B3 單元格 。如下圖所示：

2.5 預覽效果

點擊參數面板空白處，取消勾選「點擊查詢前不顯示報表内容」，報表初始化時不用點擊「查詢」也顯示内容。

保存模板，點擊「分頁預覽」，PC 端效果如下所示：

注：不支持移動端。

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\參數界面JS實例\10-JS實現點擊參數面板按鈕顯示或隐藏數據.cpt

點擊下載模板：10-JS實現點擊參數面板按鈕顯示或隐藏數據.cpt