表格元件 #
编辑表的数据 #
你可以通过以下任何一个选项向表格单元格添加文本或编辑其当前文本。
- 双击单元格,进入文本编辑模式
- 选择单元格并按回车键,进入文本编辑模式
- 选择单元格并开始输入
从其它电子表格应用程序中粘贴 #
你可以从 Microsoft Excel 和 Google Sheets 等电子表格应用程序中复制表格数据,并将其作为一个表格元件粘贴到 Axure RP 中。首先,在你的电子表格应用程序中复制表格单元。然后,在 Axure RP 中,右键单击画布并选择 Paste Special → Paste as Table 。
你也可以将表格数据粘贴到一个现有的表格元件中。要做到这一点,选择表格的左上角单元格,然后按 CTRL + V 或 CMD + V。粘贴的数据将填补表格中已经存在的单元格。
注意
当你把数据粘贴到现有的表格元件中时,新的列和行将不会被添加到这些元件中。
编辑行和列 #
添加、删除和移动行和列 #
要给一个表格元件添加行或列,右击它的一个单元格或一个灰色的行或列控件。在上下文菜单中,从以下方面选择。
- 在上面插入行
- 在下面插入行
- 向左插入列
- 向右插入列
要删除某一行或某一列,请右击该行或该列的单元格,或右击相应的灰色行或列控件。在上下文菜单中,选择 Delete Row 或 Delete Column 。
要重新安排一个表格的行和列,选择一个灰色的行或列控件,然后向上/向下或向左/向右拖动它。
调整行和列的大小 #
你可以通过点击某一行的边框并拖动来改变该行的高度或某一列的宽度。
Style 你还可以通过 W 和 H 面板中的字段来设置单个单元格的宽度和高度。这将自动调整该单元格所在行和列的大小。
要一次调整多个单元格的大小,用点击-拖动或用 SHIFT 点击每个单元格来选择单元格。然后,使用 W 和 H 字段。
特殊的Interactions(交互) #
与单个单元格交互 #
表格元件中的每个单元格都有自己的 事件 (opens new window) ,你可以用它来设置特定于该单元格的交互。例如,你可以配置一个单元格的 Click or Tap 事件来显示页面上的另一个元件。
你也可以在 interactions (opens new window) 和 conditions (opens new window) 中针对单个表格单元格。例如,你可以用 Set Text 动作改变单元格上的文本,你可以用 text on widget 值选项评估单元格上的文本。
提示
当你把鼠标放在 Select Widget 下拉菜单中的单元格名称上时,该单元格会在画布上以黄色显示。请看上面的截图中的 Column 3 单元格为例。
你也可以在 Interactions 和 Notes 面板中为单个表格单元格命名,以使它们更容易找到。
限制和解决方法 #
图片 #
表格单元格不能包含图像,只能包含文本。为了模拟一列图像,你可以在表格中创建一个空列,并在上面放置 图像元件 (opens new window) 。
合并细胞 #
表格元件单元格不能被合并。为了给合并后的表格单元格的外观,在将要合并的单元格上放置一个矩形元件。然后,将矩形上的文本设置为将占据合并后的单元格的文本。
交替的行色 #
为了使行的颜色交替出现,将每隔一行的单元格的填充颜色改为你想要的颜色。
提示
你可以使用表格元件边上的灰色框来选择一行中的所有单元格,你也可以用 CMD/CTRL 点击它们来多选行。
行的鼠标悬停样式 #
为了给整个表格行提供一个鼠标悬停或滚动的外观,在该行的顶部放置一个矩形元件。给这个矩形一个半透明的填充物,并给它分配一个 鼠标悬停样式 (opens new window) 。
动态添加、删除、排序和过滤行 #
表的行不能在浏览器中动态地添加、删除、排序或过滤。要建立这种行为的原型,请尝试以下方法之一。
使用一个多状态的 动态面板 (opens new window) 来模拟一个表格元件的动态变化。在动态面板的每个状态下,放一个已经有预期变化的表格元件。当一个给定的变化需要发生时,显示其相应的动态面板状态。
如果你需要能够对一个表进行真正的动态修改,请使用 中继器元件 (opens new window) 。