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 = contentPane.parameterEl.getWidgetByName("area");
/*給參數面板中的下拉框控件賦值*/
area2.setValue(area1);
/*執行查詢*/
_g().parameterCommit();

2.4 預覽效果

2.4.1 PC端

保存模板，選擇填報預覽，PC 端預覽效果如1.1 預期效果所示。

2.4.2 移動端

App 及 HTML5 效果如下圖所示：

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\33-JS使用填報頁面的控件查詢.cpt

點擊下載模板：33-JS使用填報頁面的控件查詢.cpt