Axure疑难杂症:完美解决中继器数据互通、增删改查(玩转中继器)

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!

课程主题:中继器数据互通、增删改查

主要内容:解决对中继器的读取、赋值、调用交互的高级数据互通设计

应用场景:台账高保真设计可复用多种场景

案例展示:

案例视频:

智慧运输管理平台-车辆管理


正文内容:

中大型项目中,100%会有的重要的内容是什么?数据台账!因此对于台账的设计不仅是产品设计的重要内容,也是客户看中的部分;内涵包括台账的字段、界面、交互、演示等内容;这个文章借用运输平台车辆管理模块的案例进行讲解和演示。

主要内容包括:筛选、新增、编辑、删除、查看五个内容。

要实现以上内容,一个很重要的思考便是要让数据流通起来,数据互通,才可以实现结果达成。而本文采用的基础元件便是文本框、动态面板、中继器,相互之间读取、赋值来完成。

另一个重要内容,便是缓存,因为Axure大部分逻辑是交互时直接赋值,而在复杂交互中,很难实现赋值,所以我引入缓存理念,由动态面板来承载缓存,简单交互采用直接赋值,复杂交互采用读值给动态面板,然后动态面板在给中继器,回调是一样的逻辑,中继器给动态面板,动态面板给文本框。

以下是各个部分详细交互:

1、筛选

筛选的逻辑:由查询按钮来触发,单击时-中继器添加筛选-查询条件文本与中继器列相符时-显示查询结果;详细交互下图

图1

2、新增

当新增一条数据时,需要有一个录入界面,我们制作一个动态面板;为什么用动态面板呢,因为其他操作也要使用;

图2

新增数据的基本逻辑:点击新增按钮时,显示新增页面-将页面的数值选择添加行-赋值给中继器;

图3

图4

3、编辑

编辑有点麻烦,应用场景是:当用户选中了一行数据要编辑,这时候就要弹出编辑页面,而且是选中行的,修改后对原数据进行修改。我们下面来分解这个过程:

用户选中一行数据,是哪行?我们使用复选框来定位

编辑页面在哪?我们新建一个动态面板

编辑页面的数据怎么来?由编辑按钮触发选中行的数据到编辑页

修改后数据怎么推给中继器?由修改页面的完成按钮完成数据的推送

下面四张图分别对应以上的逻辑:

图5

图6

图7

图8

4、删除

图9

5、查看

图10

图11

本课小结:中继器增删改查,重点在于理解数据互通的逻辑和过程,利用文本框、动态面板、中继器相互配合完成整体的交互过程。再次说一下缓存动态面板的意义,假设没有缓存动态面板的话,当用户点击标记行后,然后点击编辑,Axure判断不了要编辑什么数据,因为标记行实际已经结束了,也就是说,只有在标记的同时,数据是存在的(在点击复选框的那一瞬间,所以我们在这时候就要拿到数据,建一个动态面板先缓存起来),当点修改按钮时,这时候是一个新的开始(新的交互又开始了,不会记录之前的动作和数据)。


相关课程直通车:

Axure疑难杂症:完美解决文本框读取、赋值、计数(玩转文本框)-CSDN博客

Axure疑难杂症:完美解决中继器筛选问题(时间条件筛选、任性筛选)-CSDN博客

如有其他相关问题,欢迎私信沟通,关注 结构化知识课堂-CSDN博客

明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!

相关推荐
雪碧聊技术19 小时前
什么是Axure?
产品经理·axure·根据需求,画页面原型
十八朵郁金香8 天前
【H5工具】一个简约高级感渐变海报H5设计工具
前端·javascript·产品运营·axure·个人开发
asdfsdgss10 天前
Axure 组件不用手绘:ElementUI/Plus 元件库 + 大厂规范现成资源
elementui·axure·photoshop
xingxing_F16 天前
Axure RP 11 for Mac 交互式原型设计软件
macos·ui·axure·photoshop
云卓SKYDROID17 天前
无人机RTK信号增强技术要点
无人机·遥控器·中继器·高科技·云卓科技
云卓SKYDROID23 天前
无人机中继器技术难点
无人机·遥控器·中继器·高科技·云卓科技
IT永勇23 天前
SQLite数据库基本操作
数据库·sqlite·嵌入式开发·增删改查·关系型数据库
PM老猫1 个月前
最新版谷歌浏览器Axure插件(免翻墙)
axure
梓贤Vigo1 个月前
【Axure教程】中继器表格间筛选
交互·产品经理·axure·原型·中继器
Faylynn1 个月前
Axure:元件库无法移除元件库(解决按钮是灰色不可点击)
axure