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

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

前言:

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

列表的制作:

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
繁星流动 >_<8 天前
AXURE-实现多个原件互斥选择功能
axure
繁星流动 >_<10 天前
axure轮盘转动交互
axure
梓贤Vigo10 天前
【Axure视频教程】制作动态排名图并导入Axure
交互·产品经理·axure·原型·教程
繁星流动 >_<11 天前
axure点击图标放大展示
ui·axure
招风的黑耳14 天前
Web系统原型设计:架构复杂信息,赋能高效工作
axure·原型·web·元件库·系统原型
繁星流动 >_<16 天前
axure轮播图
axure
招风的黑耳16 天前
通用商城后台业务管理系统Web端Axure高保真原型:全面解析与功能亮点
axure·原型·商城后台
荔枝吻16 天前
【保姆级喂饭教程】【沉浸式解决问题】阿里云服务器部署原型HTML文件
服务器·阿里云·html·axure·原型
梓贤Vigo17 天前
【Axure原型分享】AI图片去水印
交互·产品经理·axure·原型
招风的黑耳18 天前
移动端数据可视化高保真原型模板:开启Axure高效设计新征程
axure·数据可视化·移动端