AXURE中继器使用:列表【新增】【编辑】【删除】

使用中继器完成对列表的【新增】【编辑】【删除】。

前言:

在平时pc端的设计中,对列表的操作是无法避免的,其中pc端列表又是不可避免的话题。

列表的制作:

本次我们需要职位一张员工档案表,其中需要包含【姓名】【年龄】【职位】【薪资】【操作】列。

1、我们先在原件中拖入"中继器"双击进入,将其复制成五列,并将这五列命名为【姓名】【年龄】【职位】【薪资】【操作】,用以放置我们每列的内容。并在样式中输入对应英文列名,此英文名称可以理解为变量,后续我们输入的每列内容为对应变量内容,并编辑上对应列的内容。

2、完成上诉操作后,我们依然还是看不到列表中的内容的,我们需要给中继器加上交互,此交互的作用实际就是将上述的变量名,变量内容绑定在一起。

3、列表内容虽然完成了,但是还是确认表头,我们拖入矩形展示表头内容,拖入按钮作为新增按钮、编辑、删除按钮。

4、制作新增弹框,拖入矩形制作列名,拖入文本框做列内容,并将文本框命名为对应的【姓名】【年龄】【职位】【薪资】【操作】,拖入按钮制作"取消""新增按钮",将制作内容组合,组合命名为【新增】最后将其'隐藏'。

5、对新增按钮添加交互,点击新增时展示新增弹框。

6、职位弹框新增交互,当单击时我们需要隐藏弹框、增加行操作,新增行中需要用到变量函数,将中继器中列名的变量名与新增弹框中的列表关联上,这样方能实现新增行效果。

7、新增弹框取消按钮交互,我们只需要在点击取消时隐藏【新增弹框】即可。

8、制作编辑弹框,内容与新增弹框保持一致即可只需要将新增按钮改为编辑按钮。并将其设置为隐藏,命名为【隐藏】。

9、制作编辑按钮交互,当点击编辑按钮时,我们需要展示【编辑弹框】,我们需要在编辑框字段中展示当前列表对应数据内容。需要将弹框列表名赋予给"中继器"字段名称,并需要编辑中继器当前行【在后续编辑列表交互中有作用】。做完以上操作我们在点击某列点击按钮时,对应编辑弹框中就会展示对应选中列数据。

10、制作编辑弹框确定按钮交互,点击确定按钮时隐藏编辑弹框,增加【更新行交互】,选中中继器,选择已标记,【上述标记行的作用,无标记行的无法定位到编辑的是哪行】。对应中继器与编辑弹框字段一一对应。

11、编辑弹框的取消按钮交互隐藏编辑弹框。

相关推荐
梓贤Vigo2 天前
【Axure原型分享】动态更换颜色
axure
colin52105 天前
AxureRP9实例-上传附件教程,并且美化上传元件SL090002
axure·上传附件
Three~stone8 天前
Axure RP 9.0 是干啥?附安装教程和安装包
axure
梓贤Vigo10 天前
【Axure教程】字母定位选择器
交互·产品经理·axure·原型·中继器
梓贤Vigo12 天前
【Axure原型分享】能上下拖动和滚动查看内容的中继器表格
交互·产品经理·axure·原型·中继器
xy345312 天前
Axure 9.0 原生组件:让折线图实现动态交互(文本标签)
ui·交互·axure·原型·折线图
xy345313 天前
Axure 9.0 原生组件:绘制折线图
ui·信息可视化·交互·axure·原型·折线图
xy345316 天前
Axure 9.0 原生组件:让柱图实现动态交互(文本标签)
ui·交互·axure·原型·柱状图
梓贤Vigo17 天前
【Axure视频教程】拖动和滚动效果
交互·产品经理·axure·原型·教程
探索未知的自己17 天前
Axure RP 9 制作登录页面过程
axure