查詢結果為空時不顯示報表內容

1.1 問題描述

在查詢報表的時候，即使沒有查詢結果，也會把表頭和表尾等資訊顯示出來。如下圖所示：

但是我們希望查詢結果為空時下面的報表區域什麼都不顯示，就像從來沒有執行過查詢一樣。而能查詢出結果的，就正常顯示報表。該如何實現呢？

1.2 解決思路

選擇某一個查詢結果所在的儲存格，如 1.1 中所述，查詢結果是「地區」，顯示地區的儲存格為 A2 ，判斷該儲存格是否為空，為空則隱藏整個報表區域。

隱藏報表區域可透過條件屬性設定列高為 0 實現，也可透過新增載入結束事件寫 JavaScript 腳本實現。

2.1 準備資料

建立普通報表，建立資料庫查詢 ds1，SQL 查詢語句為：SELECT * FROM 銷量 WHERE 地區='${地區}' ，如下圖所示：

2.2 表格設計

A1~C1 儲存格輸入標題，A2~C2 儲存格插入對應資料欄，設定 A2、B2 「資料設定」為「分組」，擴展方向為「縱向擴展」，C2 資料設定為「匯總」，C3 儲存格插入公式 SUM(C2)。表格樣式如下圖所示：

2.3 參數設定

將參數「地區」新增至參數面板，設定元件類型為「正文元件」，元件值為空，如下圖所示：

儲存報表，點選「分頁預覽」，不輸入地區或輸入地區不存在時，即查詢結果為空時，效果如下圖所示：

2.4 方案一：設定條件屬性

給每一列的第一個儲存格都新增一個條件屬性，設定列高為 0 ，公式條件為「公式類型」，公式為 len(A2)=0。

當條件屬性一樣時，可同時選中 A1、A2、A3 儲存格新增，步驟如下圖所示：

2.5 方案二：新增載入結束事件

選擇「範本>範本 Web 屬性>分頁預覽設定」（其他預覽模式下同理設定），選擇「為該範本單獨設定」，在下方事件設定處新增「載入結束」事件，輸入 JavaScript 程式碼。

JavaScript 程式碼如下：

if ($("[id^=A2]").text().length == 0) {
	$(".x-table").css("display", "none");
}

步驟如下圖所示：

2.6 效果預覽

2.6.1 PC 端

儲存報表，點選「分頁預覽」，上述兩種方案效果相同，如下圖所示：

2.6.2 行動端

新增載入結束事件的方案不支援行動端，設定條件屬性的方案支援 App 端和 H5 端，效果如下圖所示：

點選下載範本：

查詢結果為空時不顯示報表內容.cpt

查詢結果為空時不顯示報表內容-JS.cpt