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

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

前言:

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

列表的制作:

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
招风的黑耳1 天前
基于 Axure 与 Element UI 风格的拖动列调整位置表格设计
axure·element·表格·拖动列
梓贤Vigo1 天前
【Axure原型分享】卡片排序
交互·产品经理·axure·原型·中继器
招风的黑耳1 天前
基于 Axure 与 Element UI 风格的拖动行排序表格设计
elementui·axure·表格·拖动
荔枝吻4 天前
【AI总结】Axure实战:解决导航栏母版跳转后选中状态丢失问题
axure·导航栏
招风的黑耳4 天前
Axure设计的数据大屏:以泾县农村经济分析大屏为例
axure·可视化
招风的黑耳10 天前
Axure快速精通指南:从入门到高保真原型设计
axure·原型设计
招风的黑耳10 天前
智慧社区可视化大屏原型(Axure)设计
axure·可视化·智慧社区
招风的黑耳10 天前
Axure设计案例——颜色选择器
ui·axure·颜色选择器
梓贤Vigo10 天前
【Axure原型分享】AI图片修复
交互·产品经理·axure·原型·中继器