On this page

网格布局

网格布局让您在组内将字段定位在 CSS 网格中，实现多列表单设计。

网格布局功能让您使用 gridformat<> appearance 标签在组内将问题排列在多列网格中。这对于需要多个相关字段并排显示而不是垂直堆叠的密集数据录入表单很有用。

工作原理

网格布局在两个层级上应用：

网格使用 12 列 Bootstrap 式系统。weight=N 定义您的网格有多少逻辑列；每列占 12/N 个 Bootstrap 列。

  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`）

type	name	label	appearance
begin_group	demographics	人口统计	`field-list grid(weight=2)`
text	first_name	名字	`gridformat<row=1 col=1/>`
text	last_name	姓氏	`gridformat<row=1 col=2/>`
integer	age	年龄	`gridformat<row=2 col=1/>`
select_one gender	gender	性别	`gridformat<row=2 col=2/>`
text	address	完整地址	`gridformat<row=3 col=1 colspan=2/>`
end_group

这将渲染为：

  [ 名字              ] [ 姓氏              ]
[ 年龄              ] [ 性别              ]
[ 完整地址（跨两列）                     ]

type	name	label	appearance
begin_group	plot_data	地块详情	`field-list grid(weight=3)`
text	plot_id	地块 ID	`gridformat<row=1 col=1/>`
decimal	area_ha	面积（公顷）	`gridformat<row=1 col=2/>`
select_one crop_type	crop	农作物类型	`gridformat<row=1 col=3/>`
decimal	yield	产量（千克）	`gridformat<row=2 col=1/>`
decimal	revenue	收入	`gridformat<row=2 col=2/>`
text	notes	备注	`gridformat<row=2 col=3/>`
end_group

使用 backgroundcolor 在视觉上区分章节：

type	name	label	appearance
note	section_a	A 部分	`gridformat<row=1 col=1 colspan=2 backgroundcolor=#e8f4f8/>`

高级重复

重复组的高级模式：动态计数、嵌套重复、汇总重复数据以及跨重复 …

HTML 样式

rtSurvey 在标签和提示中支持 HTML 标签，允许富 …