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

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

前言:

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

列表的制作:

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
spencer_tseng3 小时前
Terminal Single Sign-on
axure
colin52101 天前
Axure 本地预览时加载慢的问题分析和处理方法
axure·谷歌字体样式·网页加载慢
colin52102 天前
AxureRP11实例-手机号提交验证交互功能JH110002
axure·axurerp11·手机号验证
colin52102 天前
AxurePR11实例-验证码倒计时交互功能JH110001
交互·axure·验证码产品交互
Autumn_ing4 天前
2026国内外主流设计工具大对比:Axure、墨刀、Figma、Pixso
ui·aigc·axure·figma·墨刀
okra-5 天前
Axure RP 10 进阶指南:从全局变量到JavaScript语法,打造高效原型设计!
javascript·axure·photoshop
梓贤Vigo5 天前
【Axure高保真原型】卡片和表格间切换
交互·产品经理·axure·原型·中继器
梓贤Vigo6 天前
【Axure教程】拖动分组
交互·产品经理·axure·原型·教程
zzzb1234569 天前
【教程】Axure RP 9 超详细安装指南:从下载、汉化到授权配置(避坑必看)
axure
默默无闻 静静学习9 天前
Axure基础界面介绍及小技巧
axure