JS實現點選參數面板按鈕顯示或隱藏資料

1.1 版本

1.2 問題描述

當報表中列表資料太多時，想透過顯示按鈕隱藏明細資料只顯示統計資料。如下圖範例，該如何實現？

1.3 實現思路

透過 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\doctw\JS\參數介面JS實體\10-JS實現點選參數面板按鈕顯示或隱藏資料.cpt

點選下載範本：10-JS實現點選參數面板按鈕顯示或隱藏資料.cpt