axure商城

【Axure 教程】中继器入门教程-数据增删

入门教程会分为 6 个小节,本节主要讲解如何实现列表的数据增删

【Axure 教程】中继器入门教程-数据增删

原型展示:https://lyz96n.axshare.com

所需原件:

  1. 中继器
  2. 文本款
  3. 文本标签
  4. 下拉列表

本文主要讲解中继器的基本用法,以便大家更容易去理解和学习中继器的高级用法,入门教程会分为 6 个小节,本节主要讲解如何实现列表的数据增删


一、列表制作

【Axure 教程】中继器入门教程-数据增删

这里我们直接引用课程 【Axure 教程】中继器入门教程-列表制作 中制作的列表,快速修改表头和中继器数据后,得到一个列表,如上图;

二、表单设置

【Axure 教程】中继器入门教程-数据增删

根据示例,我们需要两个文本框,分别作为【姓名】和【年龄】的赋值,下拉框作为【性别】的赋值,如上图所示;

三、创建数据

拖入文本标签,编辑为【添加】按钮,创建交互

【Axure 教程】中继器入门教程-数据增删

选择添加行,并在行数据中设置数据来源;

【Axure 教程】中继器入门教程-数据增删

特别地,如果是下拉框,则需要将局部变量设置为【被选项】,如上图所示;

四、删除数据

【Axure 教程】中继器入门教程-数据增删

双击中继器,选中【删除】文本标签,设置交互:【单击时】删除【当前行】;

五、细节优化

我们希望如果创建数据时,数据为空则不执行添加行的交互,并且标记文本框和下拉列表,如下图设置;

【Axure 教程】中继器入门教程-数据增删

此外,希望在创建完成数据后,表单数据重置,因此,在添加行后,将文本框置空并将下拉列表重置默认选项,如下图所示;

【Axure 教程】中继器入门教程-数据增删


更多内容,微信搜索“爱学儿”,一起交流探讨吧!

给TA打赏
共{{data.count}}人
人已打赏
基础教程

【Axure 教程】中继器入门教程-页面切换

2021-5-24 11:49:59

基础教程

【实用案例教程】如何用axure中继器制作图片水印和文字水印

2021-5-25 12:40:14

axure商城
2 条回复 A文章作者 M管理员
  1. 梦宝

    文本框的交互是:“设置文本”当前为“This.text”,选择框的交互是选择什么呢?

    • SamDesigner

      哪一步?中继器加载还是添加行的时候,如果是添加行,那么添加局部变量“被选项”

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索