JS實現決策報表參數介面自動查詢

1.1 問題描述

決策報表中新增參數面板後，一般情況是點選「查詢」按鈕，才會展現報表主體內容。如何實現不點選「查詢」按鈕，參數元件選擇值之後即可將報表結果展現出來呢？如下圖所示：

1.2 實現思路

可以給參數面板中的元件新增 JS 事件，實現元件選擇或編輯值後查詢資料，呈現報表。JS API為：

_g().parameterCommit();

2.1 準備範本

1）建立一張決策報表，新增資料集 ds1，SQL 語句為：SELECT * FROM 銷量 where 地區='${地區}'，其中有一個資料集參數「地區」。如下圖所示：

2）在 body 中新增 參數介面 para 和一個報表塊 report0。如下圖所示：

3）在「地區」參數新增在參數面板中，元件類型選擇「下拉框元件」。如下圖所示：

4）選中下拉框元件，在「組件設定>屬性>資料字典」處為「下拉框元件」綁定資料字典。類型選擇「資料庫表」，資料庫為 「FRDemoTW」，資料表為「銷量」，實際值與顯示值的列名都選擇「地區」。如下圖所示：

5）點選報表塊 report0，編輯 report0，將資料集欄位拖入儲存格中，設計報表樣式。如下圖所示：

最終範本如下圖所示：

2.2 新增事件

點選參數面板上的「地區」下拉框元件，在「組件設定>事件」處為其新增一個「編輯後」事件，實現元件選擇值後觸發查詢，不點選「查詢」按鈕即可展現報表。如下圖所示：

JavaSccript 程式碼如下：

_g().parameterCommit();

注：行動端需要將 JS 新增到編輯結束事件中。

2.3 預覽效果

儲存範本，點選「PC端預覽」，地區下拉框選擇地區後，不用點選查詢按鈕，報表即呈現。 PC 端效果如下圖所示：

App 及 HTML5 效果如下圖所示：

點選下載範本：23-決策報表自動查詢JS.frm