Axure教程—表格新增(中继器)

本文介绍的是用Axure中的中继器制作表格新增功能效果
效果
在这里插入图片描述
预览地址:https://ure09q.axshare.com

功能

用户点击“新增”出现表单,填写数据后保存数据。

制作

一、所需元件
矩形元件、中继器
二、制作过程
1、表格
拖入一个表格元件,表格设置4×1 ,命名为“表格title”,分别对单元格命名为“姓名”、“年龄”、“性别”和“班级”,如图:
在这里插入图片描述

  2.中继器
  在表格下方拖入一个中继器元件,命名为“list”,对其赋值,如图:

在这里插入图片描述
3、中继器内部
拖入四个矩形元件,分别命名为“xingming”、“nianling”、“xingbie”、“banji”,四个矩形组合一起命名为“data”,如图:
在这里插入图片描述
4、表单
拖入一个矩形,命名为”表单“,其大小设置为725×291,在”新增“矩形上拖入一个矩形,文本设置为”操作“,在其下方制作表单,四个文本框分别命名为“xingming”、“nianling”、“xingbie”、“banji”,组合一起设置为隐藏状态,如图:
在这里插入图片描述
整体设计,如图

在这里插入图片描述
交互
1、中继器
每项加载时,设置矩形“xingming”文本值为[[Item.xingming]],矩形“nianling”文本值为[[Item.nianling]] ,矩形 “xingbie”文本值[[Item.xingbie]]、矩形“banji”文本值为[[Item.banji],如图:
在这里插入图片描述
2、新增按钮

鼠标点击时,如图;

在这里插入图片描述
3、保存按钮
鼠标点击时,if 文字于 banji != “”
and 文字于 xingbie != “”
and 文字于 nianling != “”
and 文字于 xingming != “”
and 值于 OnLoadVariable == “1”
中继器“list"添加行,隐藏表单,如图:
在这里插入图片描述

在这里插入图片描述
if 文字于 banji != “”
and 文字于 xingbie != “”
and 文字于 nianling != “”
and 文字于 xingming != “”
and 值于 OnLoadVariable == “0”
更新”list“数据,隐藏表单,如图
在这里插入图片描述
在这里插入图片描述
整体设置,如图:
在这里插入图片描述

4、取消按钮
鼠标点击时,设置矩形“xingming”文本值为” “,矩形“nianling”文本值为” “ ,矩形 “xingbie”文本值” “、矩形“banji”文本值为” ,隐藏表单,如图:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43516258/article/details/131528840