2020-09-29Axure中继器做个简单的添加数据表

先看个效果。

输入姓名信息，输入年龄信息，点击添加，得到下面表格新增一行。

点击删除，删掉最新增加的一行。

第一步，拖个中继器进空白画布。

第二步，双击拖入的中继器，进入中继器的编辑模式。

第三步，copy这个矩形，拖到跟它并排摆放，并给它命个名以留后用。

第4步，为了给新的列存放数据，我们需要在中继器的数据表中也增加一个新的列。

然后，把它里面的信息改成你想要的。

可是，你发现，只有Column0的数据被填写到了中继器里，Column1的数据就没有，why？

这是因为默认状态下，这个中继器的交互只有把Column0的值填到test0里去，所以我们需要手动添加把Column1的数据填到test1里去，用上面框出的【添加目标】。

如上，就添加完成了。

第5步，为按钮增加动作。点击【添加】按钮时，有两个动作：a，是增加一行，并将输入框里的文字填入新的一行。b，是清空输入框的文字，便于用户再次输入。

选择中继器，新增行

点击fx，进行编辑。

按照下图数字步骤，先设置局部变量的文字为输入框【name】里的文字，再插入这个变量。

插入后，如下图。对Column1进行相似的设置，只是这里的元件文字换为输入框【age】里的即可。

预览看看，你已经完成了增加一行。只是输入框里的文字还没有清空，下面再设置输入后清空的动作。原理是，将输入框里的文字设置为空。

在添加按钮下继续增加动作--设置文本

如下图，找到目标元件文本输入框【name】，设置值空着即可，点击确定。【age】同理。

添加好了两个动作，再预览试试吧~

最后一步，给删除按钮设置删除动作。

找到isLast，选择它则删除的是最后一行

点击确定即可。

这样，我们就完成了~