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博客

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

相关推荐
结构化知识课堂20 小时前
Axure疑难杂症:完美解决中继器筛选问题(时间条件筛选、任性筛选)
axure·中继器筛选·时间筛选·多条件筛选
招风的黑耳21 小时前
【Axure元件分享】时间范围选择器
axure·时间范围选择器
招风的黑耳21 小时前
【Axure元件分享】月份范围选择器
axure·年月选择器
招风的黑耳2 天前
我用Axure画了一个富文本编辑器,还带交互
axure·富文本编辑器
招风的黑耳2 天前
【Axure元件分享】年份范围选择器
axure·年份选择器
结构化知识课堂3 天前
Axure疑难杂症:完美解决文本框读取、赋值、计数(玩转文本框)
axure·验证码·计数器·文本框·文本框赋值·文本框读取·文本框监控
结构化知识课堂4 天前
Axure项目实战:智慧运输平台后台管理端-母版、登录(文本框高级交互)
axure·母版设计·注册登录·垂直菜单·文本框高级交互
招风的黑耳4 天前
ElementUI元件库——提升Axure原型设计效率与质量
前端·elementui·axure
梓贤Vigo8 天前
【Axure高保真原型】纵向图片轮播
交互·产品经理·axure·原型