卡片分欄

1

版本。

2

預期效果。

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

3

實現思路。

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

1

資料準備。

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

2

範本設計。

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

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

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

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

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

3

分欄設定。

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

2. 上述範本設計中可以看出，每一位員工資訊佔了 12 列 4 欄。

3. 若我們希望每欄顯示 3 位員工資訊，則需要設定每欄 36 列（ 12 列 * 3 卡片= 36 列），超過的到下一欄顯示，以此類推。

4. 在菜單欄中，選擇【範本】→【報表換列換欄】，設定為按列分欄，超過 36 列時進按列分欄，參與分欄的資料從左上角的 A3 (不包括大標題) 到右下角的 D14，故在分欄資料中填寫A3:D14，因為大標題列沒有作為分欄資料，所以設定重複列序號為1，如下圖。

1

PC 端。

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

注：只支援分頁預覽。

2

行動端。

1. App和HTML5 端。

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

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

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