JS實現使用填報頁面的元件查詢

1.1 版本

1.2 應用場景

在設計報表的程式中，有需要使用填報元件來實現查詢的需求。

例如，下拉框選擇地區後列表自動過濾顯示所選地區的資料。如下圖所示：

1.3 實現思路

在參數面板新增下拉框元件並隱藏面板，在報表頁面新增同樣的下拉框元件，為其新增 編輯後事件 ，將該元件的值指派給參數面板的元件，並執行查詢。

2.1 建立報表

建立一張普通報表。如下圖所示：

2.2 準備資料

建立資料查詢 ds1 ，SQL 語句為：SELECT * FROM 銷量 where 1=1 ${if(len(area)==0,"","and 地區='" + area + "'")} 。如下圖所示：

2.3 設定參數面板元件

1）點選參數面板的編輯按鈕進入參數面板編輯介面，點選右側的「全部新增」，將參數area新增至參數面板。如下圖所示：

2）設定參數area的元件為下拉框元件。如下圖所示：

3）選中右側的「para」，取消勾選「點選查詢前不顯示報表內容」。如下圖所示：

4）將滑鼠移至參數面板的下邊框，出現雙向箭頭，按住滑鼠左鍵拖動至頂端，將參數面板的高度設定為 0，即隱藏參數面板。如下圖所示：

2.4 設計範本

1）B2 儲存格輸入正文內容，C2 儲存格新增下拉框元件，並輸入公式：$area。如下圖所示：

2）為下拉框元件設定資料字典，類型設定為「資料庫表」，資料庫為 FRDemo ，資料庫表為「銷量」，實際值和顯示值都為「地區」。如下圖所示：

3）B3-E3 儲存格輸入正文內容，B4-E4 儲存格拖入資料集欄位。如下圖所示：

4）選中 E4 儲存格，點選右側的「儲存格元素」，資料設定為「匯總>求和」。如下圖所示：

2.5 新增編輯後事件

選中 C2 儲存格，點選右側「元件設定>事件」，為其新增編輯後事件，輸入 JavaScript 程式碼。如下圖所示：

JavaScript 程式碼如下：

注：該程式碼不適合 10.0，請不要copy到 10.0 使用。10.0 方案見：https://help.fanruan.com/finereport10.0-tw/doc-view-1828.html

/*獲取儲存格C2選擇的地區元件的值*/
var area1=this.getValue();
/*獲取參數面板中的下拉框元件*/
var area2 =_g().getParameterContainer().getWidgetByName("area");
/*給參數面板中的下拉框元件指派*/
area2.setValue(area1);
/*執行查詢*/
_g().parameterCommit();

2.6 設定範本Web屬性

1）點選菜單欄「範本>範本 Web 屬性」，選擇「填報頁面設定>為該範本單獨設定」。

2）取消勾選「未提交離開提示」，並勾選「直接顯示元件」。如下圖所示：

2.4 預覽效果

2.4.1 PC端

儲存範本，選擇「填報預覽」，PC 端預覽效果如 1.2 節所示。

2.4.2 行動端

行動端效果如下圖所示：

已完成的範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實體\33-JS使用填報元件頁面的元件查詢.cpt

點選下載已完成範本：JS實現使用填報頁面的元件查詢.cpt