卡片分欄

1.1 版本

1.2 預期效果

實際應用中會有如下圖的情況：需要將查詢出的資訊以卡片的形式在頁面顯示，每個卡片均有大標題和表頭，並且各卡片之間有空行或空列進行分割。

1.3 實現思路

可以使用分欄設定，實現卡片式的分欄效果。

2.1 資料準備

建立一張範本，建立資料集 ds1：select * from 僱員

2.2 範本設計

如下圖所示，將資料列拖入相應儲存格。

由於每個員工卡片都包括大標題和表頭，各卡片之間均有空行和空列進行分割，並且員工卡片是根據“員工ID”列進行縱向排序擴展的。

具體儲存格設定參見下表：

注：最左父格的資料設定需要設定為「列表」。

預覽效果如下：每個卡片有完整的資訊，並且卡片之間有空白分割行。

2.3 分欄設定

上述範本預覽效果可以看出該範本是縱向擴展，故分欄選擇按列分欄。

上述範本設計中可以看出，每一位員工資訊佔了 7 行 4 列（包括卡片和下方空白分隔行及右側空白分割列）：第一行是大標題行，第一欄是表頭列，但由於每條卡片都帶有大標題和表頭，故可以將大小標題看成是資料的一部分，所以是 7 行 4 列，而不是 6 行 3 列。

若我們希望每欄顯示 4 位員工資訊，則需要設定每欄 28 行（ 7 行 * 4 卡片= 28 行），超過的到下一欄(卡片是縱向擴展，故下一欄是指下一欄)顯示，以此類推。

在菜單欄中，選擇「範本>報表分欄」，設定為按列分欄，超過 28 行時進按列分欄，參與分欄的資料從左上角的 A1 (大標題開始的儲存格)到右下角的 D7，故在分欄資料中填寫 A1:D7，因為大小標題行已經作為分欄資料，所以重複行序列為空，如下圖：

3.1 PC 端

儲存範本，選擇分頁預覽，實現效果如 1.2 節所示。

注：只支援分頁預覽。

3.2 行動端預覽效果

App 與 HTML5 端效果相同，如下圖所示：

已完成的範本可參考%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\卡片分欄.cpt

點選下載範本：卡片分欄.cpt