使用中继器完成对列表的【新增】【编辑】【删除】。
前言:
在平时pc端的设计中,对列表的操作是无法避免的,其中pc端列表又是不可避免的话题。
列表的制作:
本次我们需要职位一张员工档案表,其中需要包含【姓名】【年龄】【职位】【薪资】【操作】列。
1、我们先在原件中拖入"中继器"双击进入,将其复制成五列,并将这五列命名为【姓名】【年龄】【职位】【薪资】【操作】,用以放置我们每列的内容。并在样式中输入对应英文列名,此英文名称可以理解为变量,后续我们输入的每列内容为对应变量内容,并编辑上对应列的内容。

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

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

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

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

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

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

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

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

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


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