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

1.1 預期效果

在設計報表的程式中，有部分需求需要使用填報元件來實現查詢的功能。如下圖所示，下拉框選擇地區後列表自動過濾顯示所選地區的資料。

1.2 實現方法

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

2.1 建立報表

2.1.1 建立資料集

建立普通報表，建立資料集 ds1 ，SQL 語句為：SELECT * FROM 銷量 where 1=1 ${if(len(area)==0,"","and 地區='" + area + "'")} 

如下圖所示：

2.1.2 設計範本

將資料集的欄位拖入儲存格中，並在 C2 儲存格新增一個選擇地區的下拉框元件，如下圖所示：

2.1.3 設定元件屬性

1）被選儲存格中新增的下拉框元件，點選元件設定，設定下拉框元件名為 area，設定元件資料字典為銷量表中的地區欄位，如下圖所示：

2）選擇範本>範本 Web 屬性>填報頁面設定，取消勾選未提交離開提示，並勾選直接顯示元件，如下圖所示：

2.2 設定參數介面

1）編輯參數介面，新增一個下拉框元件，元件名為 area，設定元件不可見，如下圖所示：

2）點選參數介面空白處，取消勾選點選查詢前不顯示報表內容，如下圖所示：

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

2.3 新增編輯後事件

選中填報元件，新增編輯後事件，輸入 JavaScript 程式碼，如下圖所示：

JavaScript 程式碼如下：

/*獲取儲存格C2選擇的地區元件的值*/
var area1=this.getValue();
/*獲取參數面板中的文字元件*/
var area2 =_g().getParameterContainer().getWidgetByName("area");
/*給參數介面中的文字元件指派*/
area2.setValue(area1);

/*執行查詢*/
_g().parameterCommit();

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

2.4 預覽效果

2.4.1 PC端

儲存範本，選擇填報預覽，PC 端預覽效果如1.1 預期效果所示。

2.4.2 行動端

App 及 HTML5 效果如下圖所示：

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