Axure教程:中继器实现商品管理列表

访客3年前黑客文章807

本文通过一个商品管理的例子,来说明中继器怎么使用。在这个商品管理列表里面,我们要实现商品信息的分页展示、新增、修改、删除和排序功能。

Axure教程:中继器实现商品管理列表

中继器是axure里面非常重要的一个元件,通过中继器,可以实现数据的动态查询、新增、修改、删除、排序、分页等功能,直接说吧,数据动态展示的那一套东西都可以通过中继器实现。

下面,我就通过一个商品管理的例子,来说明中继器怎么使用。在这个商品管理列表里面,我们要实现商品信息的分页展示、新增、修改、删除和排序功能。

我们先看看最终实现的效果:

Axure教程:中继器实现商品管理列表

需求分析

在上面的例子,我们需要实现如下几个效果:

能够分页显示商品列表,每页显示5个商品;

店家新增按钮,能够新增商品;

点击价格排序,能够按照价格排序,并且升序、降序可以自动切换;

点击修改,能够在弹出页面展示所选中的商品信息,修改完成以后,点击保存按钮,修改的数据能够保存;

点击删除按钮,能够删除所选的记录。

原型设计

(1)我们先在画布区拖入一个中继器,并且命名该中继器是datalist,然后在中继器里面增加增加6个列,分别是编号、商品名称、价格、库存以及两个操作列。

Axure教程:中继器实现商品管理列表

(2)设置中继器对应的数据 *** ,该数据集包含4个列,分别是code、name、price、num,分别对应商品编号、商品名称、价格和库存,然后录入模拟数据。

Axure教程:中继器实现商品管理列表

(3)在左上角 拖入两个按钮,分别是新增和 价格排序。

(4)在有下方拖入两个文字标签,分别改成上一页、下一页。

(5) *** 新增弹出窗口,在画布里面拖入4个输入框及对应的文字标签,并且拖入保存和关闭按钮,把这些元件选中,转换为动态面板,设置为隐藏状态,并且命名该动态面板为add。

Axure教程:中继器实现商品管理列表

(6)类似步骤5, *** 修改弹出窗口,但是要注意,在修改窗口里面,编号输入框为禁用(一般来说,编号不能修改)。

Axure教程:中继器实现商品管理列表

通过上面的6个步骤,我们已经完成了原型的设计。

交互设计

(1)设置数据加载:首先我们要做数据初始化,选择中继器的【每项载入】事件,在每项载入的时候,设置中继器的列表里面的值。

Axure教程:中继器实现商品管理列表

(2)设置分页显示:选中中继器,在样式里面选择分页显示,每页5条记录就可以。

Axure教程:中继器实现商品管理列表

(3)设置翻页:选中 上一页,选择【点击】事件 , 然后选择中继器动作的【设置当前显示页】事件,并把页面设置为【previous】。

下一页类似,不同的地方在选择页面设置为【next】。

(4)新增按钮:点击新增按钮,把隐藏的动态面板add显示出来就可以了,即选择新增按钮的【点击】事件,触发元件的【显示】事件。

(5)新增保存:点击新增保存的时候,需要做两件事情:

把录入的数据保存到数据中继器对应的数据源;

关闭新增弹窗。

对于A,使用中继器的新增记录动作完成;对于B,使用隐藏该动态面板动作实现。

Axure教程:中继器实现商品管理列表

(6)修改数据:修改数据与新增数据类似,但是有一点差别,就在弹出的修改窗口里面,要显示对应修改记录,这里需要在显示修改窗口之前,对修改窗口里面的数据进行赋值。

Axure教程:中继器实现商品管理列表

(7)修改保存:修改保存与新增保存类似,都要完成两个动作:

把修改的数据保存到数据中继器对应的数据源;

关闭新增弹窗 。

对于A,使用中继器的修改记录动作完成;对于B,使用隐藏该动态面板动作实现。

Axure教程:中继器实现商品管理列表

(8)删除:删除相对简单,直接通过删除按钮的点击事件,触发中继器的删除动作即可。

Axure教程:中继器实现商品管理列表

相关文章

全能的微信公众号,又带来了6个新功能

全能的微信公众号,又带来了6个新功能

微信公众号的每一次改动对于内容创业者而言都充满着不确定性,本文作者对最近公众号更新的6个功能进行了梳理总结并对其利弊进行了分析,与大家分享。 从年初开始,微信接连进行了一系列的产品更新,动作很多。...

视频号粉丝数TOP100榜单,投射出哪些运营优劣势?

视频号粉丝数TOP100榜单,投射出哪些运营优劣势?

今天看到了一份数据,来自第三方监测的微信视频号TOP100(统计至4月11日,跟实际可能有所出入,仅供参考)。 单看数据有点吃惊,榜首是李子柒,粉丝量不到20万,第100名粉丝量仅过万。 这数据显...

产品经理如何做功能设计?

产品经理如何做功能设计?

产品经理在日常工作中,最常见的场景就是进行功能设计。在进行功能设计时,一般需要用到流程图、线框图,将自己和团队的想法、竞品分析和用户调研的结果进行归纳总结,最终输出成型的文档或交互稿。 好的功能设计...

大厂面试题解析(3):请列举一支笔的20种用途

大厂面试题解析(3):请列举一支笔的20种用途

笔试、面试作为校招求职者的重要门槛,企业通过考查求职者知识储备、能力、潜力、素养、交际协同等多方面能力,为企业选拔较为匹配的同学。 为了更加快速、直接的考查学生的产品思维、解决问题的能力。企业常常出...

产品经理如何理解用户?

产品经理如何理解用户?

产品经理要将用户需求了解透彻应用到产品中,创造出用户与商业二合一的产品,这样的产品才会获得价值与利益,所以了解用户将是产品经理的一部分。 互联网让所有产品与用户的距离更加接近,这就使得了解用户需求的...

交互规范:响应式让屏幕利用更高,用户体验更佳

交互规范:响应式让屏幕利用更高,用户体验更佳

让用户在不同设备和尺寸的屏幕下看的页面显示效果更佳,屏幕空间利用更高,操作体验更统一,交互方式更符合习惯。本文主要围绕什么是响应式,如何搭建响应系统,响应式网站解析 三个部分进行阐述,在项目中提前定义...