網格佈局功能讓您使用 gridformat<> 外觀標籤在群組內以多欄網格排列問題。這對於密集的資料輸入表單非常有用，其中多個相關字段應並排顯示而不是垂直堆疊。

工作原理

網格佈局在兩個層級應用：

  1. 群組 — 設定 appearance: field-list grid(weight=N) 定義網格有多少欄
  2. 群組內的每個字段 — 設定 appearance: gridformat<row=R col=C colspan=S/> 定位字段

網格使用 12 欄 Bootstrap 式系統。weight=N 定義您的網格有多少個邏輯欄；每欄佔用 12/N 個 Bootstrap 欄。

群組級別外觀

外觀說明
field-list grid(weight=2)2 欄網格（每欄 = 6 個 Bootstrap 欄）
field-list grid(weight=3)3 欄網格（每欄 = 4 個 Bootstrap 欄）
field-list grid(weight=4)4 欄網格（每欄 = 3 個 Bootstrap 欄）
field-list grid(weight=6)6 欄網格（每欄 = 2 個 Bootstrap 欄）

字段級別 gridformat<> 語法 

  gridformat<row=R col=C colspan=S/>
gridformat<row=R col=C colspan=S backgroundcolor=COLOR/>
屬性說明
row行號（從 1 開始）
col欄號（從 1 開始，在 weight 定義的網格內）
colspan此字段跨越的欄數（預設 1）
backgroundcolor字段背景的可選 CSS 顏色（例如 #f0f0f0、lightblue）

範例：2 欄家庭問卷調查章節

typenamelabelappearance
begin_groupdemographics人口統計field-list grid(weight=2)
textfirst_name名字gridformat<row=1 col=1/>
textlast_name姓氏gridformat<row=1 col=2/>
integerage年齡gridformat<row=2 col=1/>
select_one gendergender性別gridformat<row=2 col=2/>
textaddress完整地址gridformat<row=3 col=1 colspan=2/>
end_group

顯示效果如下：

  [ 名字                ] [ 姓氏                ]
[ 年齡                ] [ 性別                ]
[ 完整地址（跨越兩欄）                        ]

範例：3 欄地塊資料輸入

typenamelabelappearance
begin_groupplot_data地塊詳情field-list grid(weight=3)
textplot_id地塊 IDgridformat<row=1 col=1/>
decimalarea_ha面積（公頃）gridformat<row=1 col=2/>
select_one crop_typecrop作物類型gridformat<row=1 col=3/>
decimalyield產量（公斤）gridformat<row=2 col=1/>
decimalrevenue收入gridformat<row=2 col=2/>
textnotes備注gridformat<row=2 col=3/>
end_group

背景顏色

使用 backgroundcolor 以視覺方式區分章節：

typenamelabelappearance
notesection_aA 章節gridformat<row=1 col=1 colspan=2 backgroundcolor=#e8f4f8/>

最佳實踐

  1. 僅對資料輸入密集的螢幕使用網格佈局，其中並排字段確實能減少滾動。
  2. 保持 colspan=1 字段簡短（ID、代碼、短選擇）——寬標籤在窄網格欄中截斷效果很差。
  3. 對具有長標籤或多行文字輸入的字段使用 colspan=N。
  4. 在您期望調查員使用的最小螢幕尺寸上進行測試——4 欄網格在手機上很擁擠。
  5. 網格佈局在網頁和平板電腦外形上效果最好；在行動手機上，2 欄佈局通常是最大舒適寬度。

限制

  • gridformat<> 只在帶有 grid(weight=N) 外觀的群組內有效——在頂層沒有效果。
  • 網格佈局是 rtSurvey 網頁表單擴展，在其他 ODK 兼容客戶端中可能無法正確呈現。
  • 行和欄定位在表單構建時不進行驗證——重疊的字段都會呈現，但可能看起來損壞。
此頁面有幫助嗎？