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

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

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

引言

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

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

放入中继器

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

image.png

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

image.png

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

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

image.png

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

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

image.png

image.png

添加交互

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

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

image.png

选取表格的交互

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

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

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

image.png

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

image.png

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

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

image.png

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



相关文章
【Axure教程】中继器表格插入行、复制行和删除行
【Axure教程】中继器表格插入行、复制行和删除行
【Axure教程】中继器表格插入行、复制行和删除行
|
2月前
|
存储 数据可视化 UED
Axure中继器动态数据图表制作
在Axure RP中,中继器(Repeater)是一个非常强大的工具,它允许设计者动态地展示和交互数据,进而创建各种复杂的数据可视化图表,如柱状图、条形图、堆叠图、散点图和对比图。以下将详细介绍如何使用中继器来设计这些图表。
59 16
Axure中继器动态数据图表制作
PyQt5 技术篇-QTableWidget表格组件指定行的隐藏与显示控制实例演示,设置表格指定列的列宽方法
PyQt5 技术篇-QTableWidget表格组件指定行的隐藏与显示控制实例演示,设置表格指定列的列宽方法
691 0
PyQt5 技术篇-QTableWidget表格组件指定行的隐藏与显示控制实例演示,设置表格指定列的列宽方法
|
3月前
|
测试技术
Axure 绘制表格添加删除
Axure 绘制表格添加删除
33 0
|
3月前
Axure 表格中根据条件设置不同的字体样式--中继器
Axure 表格中根据条件设置不同的字体样式--中继器
61 0
|
敏捷开发 前端开发 开发者
【RaETable】🚀🚀🚀告别Form,RaETable表格列宽度支持拖动调整了,附带原理说明
【RaETable】🚀🚀🚀告别Form,RaETable表格列宽度支持拖动调整了,附带原理说明
【Axure教程】中继器表格寻找和标记数据
【Axure教程】中继器表格寻找和标记数据
【Axure教程】中继器表格集合(增删改查筛选移动排序等效果)
【Axure教程】中继器表格集合(增删改查筛选移动排序等效果)
【Axure教程】中继器表格集合(增删改查筛选移动排序等效果)