決策報儲存格件實現點選查詢按鈕後才能查詢

1.1 預期效果

在決策報表 body 中使用元件查詢資料時，若其他組件引用了元件名稱作為參數，那麼元件在選擇查詢參數後點選「確定」或點選空白處，會立即觸發查詢動作。如下圖所示：

但有時候希望它不會自動查詢，而是透過點選「查詢按鈕」來觸發查詢動作。如下圖所示：

1.2 解決思路

在元件的「編輯結束」事件裏用 return false; 阻止原有的查詢效果，然後在查詢按鈕裏用 gotoPage 去重新整理報表塊並實現傳參效果。

注：正文元件需使用「編輯後」事件。

2.1 準備範本

1）點選設計器左上角「檔案>建立決策報表」，建立空白範本。

2）點選頂部菜單欄「範本>PC端自適應屬性」，將報表佈局設定為「絕對佈局」。如下圖所示：

2.2 設計報表

1）向 body 中分別拖入標籤元件、下拉複選框元件、按鈕元件、報表塊，調整到合適大小和佈局。最終效果如下圖所示：

2）本例中「下拉複選框元件」回傳值為「陣列」，那麼給報表塊的 A1 儲存格新增公式 split($a,",") ，表示傳回由逗號分割的字串陣列。再設定「儲存格屬性>擴展」中的擴展方向為「縱向擴展」，那麼下拉框多選時，傳回的值可縱向排列展示。

2.3 設定標籤元件

選中標籤元件，設定元件值為字串 序列查詢： ，如下圖所示：

2.4 設定下拉框複選元件

1）選中「下拉複選框元件」，設定元件名稱為 a ，資料字典類型為「自訂」。如下圖所示：

2）在事件中新增一個編輯結束事件，輸入 JavaScript 程式碼：

return false;

如下圖所示：

2.5 設定按鈕元件

1）選中按鈕元件，將按鈕名稱修改為「查詢」。

注：元件工具欄中的「查詢按鈕」元件只能在參數面板中使用，所以這裏用「按鈕元件」來實現查詢按鈕。

2）新增一個點選事件，輸入 JavaScript 程式碼如下：

var a=_g().getWidgetByName('a').getValue();  // 獲取下拉複選框元件 a 的值
_g().getWidgetByName("report0").gotoPage(1,"{a:'"+a+"'}",true);  //將 a 的值作為參數傳遞給 report0 報表塊

注1：若需要傳遞多個參數，gotoPage 寫法為 gotoPage(1,"{a:'參數值', b:'參數值'}",true) 。

注2：重新計算範本中所有報表塊，對伺服器有一定的壓力，不適用於高頻觸發的場景。

注3：若要傳參給圖表塊，可使用API changeParameter ，輸入 JavaScript 程式碼如下：

var a=_g().getWidgetByName('a').getValue();
FR.Chart.WebUtils.changeParameter({chartID: 'chart0',para: "{a:'"+a+"'}"})

如下圖所示：

2.6 效果預覽

儲存報表，點選「PC端預覽」，效果如 1.1 節預期效果所示。

注：不支援行動端。

當下拉複選框的字串分隔符為','，在使用點選「查詢按鈕」指派到對應報表塊的傳參操作時，參數的資料格式是 json 格式，不支援直接使用 ',' 作為分隔符。因此，參數值無法傳入對應的報表儲存格，導致無法進行聯動篩選。

可以透過更改「下拉複選框>屬性>分隔符」和「範本資料集>編輯>參數」實現。

3.1 準備範本

點選設計器左上角「檔案>建立決策報表」，建立空白範本。點選頂部菜單欄「範本>PC端自適應屬性」，將報表佈局設定為「絕對佈局」。

3.2 設計報表

1）向 body 中分別拖入標籤元件、下拉複選框元件、按鈕元件、報表塊，調整到合適大小和佈局。

2）建立資料集 ds1 , SQL 查詢語句為：

SELECT * FROM Air_Accidents

where Regions in('${reg}')

如下圖設計表格，將資料集中的欄位分別拖曳到對應儲存格中。

3.3 設定下拉複選框元件

選中下拉複選框元件，設定元件名稱為 ucompany ，資料字典類型為「資料庫表」。如下圖所示：

3.4 設定按鈕元件

選中按鈕元件，將按鈕名稱修改為「查詢」，新增一個點選事件，輸入 JavaScript 程式碼如下：

var a = _g().getWidgetByName('ucompany').getValue();
_g().getWidgetByName("report0").gotoPage(1, "{ucompany:'" + a + "'}", true);

如下圖所示：

3.5 設定分隔符和資料集參數

選中「下拉複選框元件」，點選頂部菜單欄「屬性>回傳值類型」，選擇「字串」，將分隔符改成 , 。

點選左側「範本資料集>編輯」，將資料集傳參查詢位置改成REPLACE($a,",","','")，將,更換成','。

注：也可將「下拉複選框元件」分隔符改成 |,| 。資料集傳參查詢位置改成 REPLACE($a,"|,|","','")。或將「下拉複選框元件」分隔符改成 "," 。資料集傳參查詢位置改成 REPLACE($a,"\",\"","','")。

3.6 效果預覽

點選下載範本：

點選查詢按鈕複選框聯動篩選.frm

決策報儲存格件實現點選查詢按鈕後才能查詢.frm