Axure 中继器 实现选取表格行、列交互

引言

在办公软件或富文本编辑器中插入表格的时候我们经常可以通过在表格上移动鼠标，可以选取想要插入的表格行、列数。

本文分享如何通过 Axure 实现这个交互。

放入中继器

这个交互的用到了中继器，所以首先在工作区拖入一个中继器元件，中继器內放一个矩形，并设置为每行10项水平分布。

在中继器上面再放上一段文字:插入表格：0行 * 0列

鼠标在中继器的矩形上移动时，填充了颜色的矩形是通过设置选中来实现的

因此这里需要先给中继器内的矩形设置选中时填充背景颜色的效果

中继器共两个字段，一个用来保存选中状态，0表示未选中，1表示选中，初始数据为0；

一个用来保存数值，初始数据共有100个数值，分别是 1~10 重复10遍，这样就形成了一个 10*10 的表格

添加交互

找到中继器內的矩形，给矩形添加载入时的交互，

只需判断中继器中 selected的值，如果等于1，选中当前矩形，如果等于0，则取消选中

选取表格的交互

选中的交互实际上就是通过改变中继器中 selected 一列的值来实现的.

当我们将鼠标移动到第 6 行第 6 列上的矩形时，可以发现，所有被选中的矩形的数值（num）均小于或等于当前数值（num）光靠这个规则来匹配的话，下方 7~ 10 行的 1~6 列也是满足的。

因此，这里还需要补充一个规则，就是选中的目标矩形 index 要小于等于当前矩形的 index，这样两个条件共同作用，才能实现我们所需要的效果.

给矩形添加鼠标移入的交互，以上述条件作为规则修改中继器 selected 的值

接下来看一下选取表格时上方的行列数是怎么实现的。

向上取整序号数为行，列就直接取num值

以上就是本文全部内容，感谢阅读。