卡片分欄

1

版本。

2

預期效果。

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

3

實現思路。

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

1

資料準備。

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

2

範本設計。

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

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

3. 具體儲存格設定參見下表。

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

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

3

分欄設定。

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

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

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

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

1

PC 端。

1. 儲存範本，選擇分頁預覽，實現效果如 第一章第2節所示。

注：只支援分頁預覽。

2

行動端。

1. App和HTML5 端。

1. 範本效果線上查看請點選：卡片分欄.cpt

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

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