离线下载
PDF版 ePub版

点击这里成为作者 · 更新于 2018-11-28 11:00:43

使用数据网格/表格

最近已经上传完毕!

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

数据网格控件的功能与其它基于文本的控件相似。它使用逗号分隔列,使用换行分隔行。一个基本的三列两行表会像这样:

First Name, Last Name, Email Address 
firstname, lastname, email@email.com

你可以在属性检视视图中选择是否将第一行作为表头来显示,同时也可以指定行高、颜色和网格线。

列宽选项

Mockups 使你可以指定独立的数据网格的宽度和队列。

下面有一个简易视频来显示怎么做这些:

视频

在创建列宽时有一些细节值得注意:

  • 你必须添加一个指定的文本行作为你的表的最后一个文本行,并且还要被波形括号 {} 包起来
  • 对于每一列,如果你想要列宽可以尽可能小到与列中文本匹配,可以设置列宽为 0;或者可以是其它数字
  • 使用数字指定列的相对大小,例如 {2,1} 表示“在一个两列数据表格中第一列是第二列的两倍大小”。再如 {70,20,10} 表示“在一个三列数据表格中第一列占总宽度的 70%,第二列占 20%,第三列占 10%。
  • 你可以混合使用 0 和除 0 之外的所有其它的数字,例如 {1,0,4}
  • 如果你想要单个列对齐,可以在数字之后添加 L,C 或者 R,比如 {0R,2L,1} 意味着“在一个三列组成的数据表格中,第一列尽可能的小,并且靠右对齐,第二列是第三列的两倍大,并且靠左对齐,通过数据网格对齐方式设置(从控制面板)来决定如何对齐这第三列”。

在数据表格中使用图标和下拉菜单

Data Grid 支持排序图标,需要在表头添加如下文本:

  • 升序 : ^
  • 降序 : v

Data Grid 支持在表格中使用一个单独的复选框或单选按钮,需要使用如下文本:

  • 复选框:[] 或 [ ]
  • 被勾选的复选框:[x] 或 [v] 或 [o] 或 [*] 或 [X] 或 [V] 或 [O]
  • 不确定的复选框:[-]
  • 单选按钮:() 或 ( )
  • 被选中的单选按钮:(x) 或 (v) 或 (o) 或 (*) 或 (X) 或 (V) 或 (O)
  • 不确定的单选按钮:(-)

在 Data Grid 中添加换行

有时候你想在表格中添加一个换行。你可以使用 "\r" 来实现这一功能。
下面的代码示例将显示成两行:

Name\r(job title)

从 Excel 中粘贴数据

有些人喜欢在电子表格比如 Excel 中准备表格。你可以直接从 Excel 中复制和粘贴一些列表格到 Data Grid/Table 组件中。只需要复制/粘贴,它就可以完成了。也可以逆向使用,从 Mockups 到 Excel。

注释:如果你的表格中有逗号,你可以使用斜杠来显示它们,像这样:
1\,000\,000

组件默认逗号和 tab 是定界符。其它所有的都必须在表格之中。

上一篇: 使用文本控件 下一篇: 使用图标