Axure9中继器教程:列表数据行删除

2023-04-1911:13:14原型设计Comments1,363 views字数 592阅读模式
一、单行数据删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

实现思路:先把要删除的数据行做标记,然后删除。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

1、设置数据行选中时的变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(1)进入中继器内部,选中四个数据列,右键-【交互样式】,在【选中】里面勾选内部阴影。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(2)选中四个数据列,右键-【组合】。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(3)选中四个数据列,右键- 【选项组】,设置选项组名称。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(4)退出中继器。在交互中,取消勾选【隔离列表项之间的选项组】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

2、标记选中的数据行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(1)添加情形条件:当前元件的选中状态值为假时,进行以下操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(2)设置选中:值为真。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(3)先取消所有数据行的标记。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(4)设置当前行为标记行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

3、添加删除按钮交互动作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

二、多行数据删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

1、沿用上面单行删除的例子。勾选【隔离列表项之间的选项组】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

2、进入中继器内部,去掉交互动作中的取消勾选逻辑。这样可以完成多选的效果,但是没有取消选中的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

3、添加情形2:当前数据行的选中状态值为真时,设置选中值为假,并且取消标记当前行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

三、复选框标记多行数据删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

1、添加复选框。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(1)拖入一个矩形,调整宽高,放在第一列,将可见性中的右侧边框设为不可见。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(2)拖入一个复选框。去掉文字信息,调整文字区域大小,并拖动复选框到矩形中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(3)在左侧概要中,找到新加的矩形,拖动到组合中(最下方),并取名为0.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(4)设置矩形的交互样式。选中新组合,在右侧切换到交互。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

2、设置复选框的交互动作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

(1)从左侧概要中选中复选框。添加交互动作-【选中时】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

3、效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html

Axure9中继器教程:列表数据行删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36008.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/36008.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定