Table Widgets
表格部件
1、Editing Table Data
编辑表格数据
You can add text to a table cell or edit its current text via any of the options below:
您可以添加文本到表格单元格或编辑其当前文本通过以下任何选项:
-
Double-click the cell to enter text-editing mode
双击单元格以进入文本编辑模式
-
Select the cell and press
ENTER
to enter text-editing mode
选择单元格并按
ENTER
进入文本编辑模式
-
Select the cell and begin typing. (This option is only available if you have disabled single-key shortcuts)
选择单元格并开始键入。(此选项仅在您禁用单键快捷方式时可用)
1.1、Pasting from Spreadsheet Applications
从电子表格应用程序粘贴
You can copy table data from spreadsheet applications like Microsoft Excel and Google Sheets and paste it into Axure RP as a table widget. First, copy the table cells in your spreadsheet app. Then, in Axure RP, right-click the canvas and select
Paste Special → Paste as Table
.
您可以从诸如Microsoft Excel和谷歌之类的电子表格应用程序中复制表数据,并将其作为表小部件粘贴到Axure RP中。首先,复制表格单元格在您的电子表格应用程序。然后,在Axure RP,右键单击画布,并选择
粘贴特殊→粘贴为表格
。
You can also paste tabular data into an existing table widget. To do so, select the top-left cell of the table and press
CTRL V
or
CMD V
. The pasted data will fill the cells already present in the table.
您还可以将表格数据粘贴到现有的表格小部件中。为此,选择表的左上角单元格并按
CTRL V
或
CMD V
。粘贴的数据将填充表格中已经存在的单元格。
Note
提示
New columns and rows will not be added to existing table widgets when you paste data into them. If the table is too small to accommodate the pasted data, add more columns and/or rows to the table
before
pasting the data.
当您将数据粘贴到现有的表小部件中时,不会将新列和新行添加到这些小部件中。如果表太小,无法容纳粘贴的数据,请在粘贴数据之前向表*添加更多的列和/或行。
2、Editing Rows and Columns
编辑行和列
editing table widget rows and columns
2.1、Adding, Deleting, and Moving Rows and Columns
添加、删除、及移动行业列
To add a row or column to a table widget, right-click one of its cells or one of the grey row or column controls. In the context menu, choose from the following:
要将行或列添加到表小部件,请右键单击其单元格或灰色行或列控件之一。在上下文菜单中,选择以下内容:
To delete a row or column, right-click a cell in that row or column, or right-click the appropriate grey row or column control. In the context menu, choose
Delete Row
or
Delete Column
.
要删除行或列,请右键单击该行或列中的单元格,或右键单击适当的灰色行或列控件。在上下文菜单中,选择
删除行
或
删除列
。
To rearrange a table's rows and columns, select a grey row or column control and then drag it up/down or left/right.
若要重新排列表的行和列,请选择灰色的行或列控件,然后将其向上/向下或向左/向右拖动。
2.2、Resizing Rows and Columns
调整行和列的大小
You can change a row's height or a column's width by clicking one of its borders and dragging.
您可以通过单击某一行的边框并拖动来更改该行的高度或列的宽度。
You can also set an individual cell's width and height with the
W
and
H
fields in the
Style
pane. This will automatically resize the row and column that the cell is a part of.
您还可以使用
Style
窗格中的
W
和
H
*字段设置单个单元格的宽度和高度。这将自动调整单元格所属的行和列的大小。
To resize multiple cells at once, select the cells with a click-drag or by <kbd>SHIFT</kbd>-clicking each cell. Then, use the
W
and
H
fields.
要同时调整多个单元格的大小,请通过单击-拖动或<kbd>SHIFT</kbd>-单击每个单元格来选择单元格。然后,使用
W
和
H
字段。
3、Special Interactions
特殊交互
3.1、Interacting with Individual Cells
与单个单元格相互作用
Each cell in a table widget has its own events that you can use to set up interactions specific to that particular cell. For example, you can configure a cell's
Click or Tap
event to show another widget on the page.
表小部件中的每个单元格都有自己的事件,可以使用它们来设置特定于特定单元格的交互。例如,您可以配置单元格的
Click或Tap
事件来在页面上显示另一个小部件。
You can also target individual table cells in interactions and conditions. For example, you can change the text on a cell with the
Set Text
action, and you can evaluate the text on a cell with the
text on widget
value option.
您还可以针对交互和条件中的单个表单元格。例如,您可以使用
Set text
操作更改单元格上的文本,您可以使用
text on widget
value选项计算单元格上的文本。
interactively setting the text on a table cell
Tip
提示
When you mouse over a cell's name in the
Select Widget
dropdown, the cell is highlighted in yellow on the canvas. Look at the
Column 3
cell in the screenshot above for an example.
当您在
Select窗口小部件
下拉菜单中鼠标移动一个单元格的名称时,该单元格在画布上以黄色突出显示。查看上面屏幕截图中的
列3
单元格作为示例。
You can also name individual table cells in the
Interactions
and
Notes
panes to make them easier to find.
您还可以在** interaction
和
Notes**窗格中命名各个表单元格,以便更容易地找到它们。
4、Limitations and Workarounds
限制和解决方法
4.1、Images
图片
Table cells cannot contain images, only text. To simulate a column of images, create an empty column in your table and place image widgets on top of it.
表格单元格不能包含图像,只能包含文本。要模拟一列图像,请在表中创建一个空列并将图像小部件放置在其上。
4.2、Merging Cells
合并单元格
merging table cells with a rectangle widget
Table widget cells cannot be merged. To give the appearance of merged table cells, place a rectangle widget over the cells that would be merged. Then, set the text on the rectangle to the text that would have occupied the merged cells.
无法合并表小部件单元格。要给出合并后的表格单元格的外观,请在将要合并的单元格上放置一个矩形小部件。然后,将矩形上的文本设置为将占用合并单元格的文本。
4.3、Mouseover Style for Rows
行的鼠标悬停样式
To give the appearance of a mouseover or rollover style for an entire table row, place a rectangle widget on top of the row. Give the rectangle a semiopaque fill and assign it a
:mouseover
style effect.
要显示整个表行的鼠标悬停或翻转样式,请将一个矩形小部件放在该行的顶部。给矩形一个不透明的填充,并赋给它一个
:鼠标悬停
样式的效果。
4.4、Dynamically Adding, Removing, Sorting, and Filtering Rows
动态添加、删除、排序和过滤行
Table rows cannot be dynamically added, removed, sorted, or filtered in the web browser. To prototype this behavior, try one of the following:
无法在web浏览器中动态添加、删除、排序或筛选表行。要创建这种行为的原型,请尝试以下方法之一:
-
Use a multi-state dynamic panel to simulate dynamic changes to a table widget. In each state of the dynamic panel, put a table widget with the expected changes already made. When a given change needs to occur, show its corresponding dynamic panel state.
使用多状态动态面板来模拟表小部件的动态更改。在动态面板的每个状态中,放置一个表小部件,其中包含已经完成的预期更改。当给定的更改需要发生时,显示其相应的动态面板状态。
-
If you need to be able to make true dynamic changes to a table, use a repeater widget instead.
如果需要对表进行真正的动态更改,可以使用repeater小部件。
4.5、Not Adaptive
不适应
All aspects of table widgets are consistent across all adaptive views. To style a table differently across adaptive views, you can "place" a different table widget in each adaptive view, "unplacing" from each view the table widgets designed for other adaptive views.
表小部件的所有方面在所有自适应视图中都是一致的。要跨自适应视图以不同的方式设计表,可以在每个自适应视图中“放置”不同的表小部件,从每个视图“替换”为其他自适应视图设计的表小部件。