童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

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

10月22日 天浪楼投稿
  本文通过一个商品管理的例子,来说明中继器怎么使用。在这个商品管理列表里面,我们要实现商品信息的分页展示、新增、修改、删除和排序功能。
  中继器是axure里面非常重要的一个元件,通过中继器,可以实现数据的动态查询、新增、修改、删除、排序、分页等功能,直接说吧,数据动态展示的那一套东西都可以通过中继器实现。
  下面,我就通过一个商品管理的例子,来说明中继器怎么使用。在这个商品管理列表里面,我们要实现商品信息的分页展示、新增、修改、删除和排序功能。
  我们先看看最终实现的效果:
  需求分析
  在上面的例子,我们需要实现如下几个效果:
  能够分页显示商品列表,每页显示5个商品;
  店家新增按钮,能够新增商品;
  点击价格排序,能够按照价格排序,并且升序、降序可以自动切换;
  点击修改,能够在弹出页面展示所选中的商品信息,修改完成以后,点击保存按钮,修改的数据能够保存;
  点击删除按钮,能够删除所选的记录。
  原型设计
  (1)我们先在画布区拖入一个中继器,并且命名该中继器是datalist,然后在中继器里面增加增加6个列,分别是编号、商品名称、价格、库存以及两个操作列。
  (2)设置中继器对应的数据集合,该数据集包含4个列,分别是code、name、price、num,分别对应商品编号、商品名称、价格和库存,然后录入模拟数据。
  (3)在左上角拖入两个按钮,分别是新增和价格排序。
  (4)在有下方拖入两个文字标签,分别改成上一页、下一页。
  (5)制作新增弹出窗口,在画布里面拖入4个输入框及对应的文字标签,并且拖入保存和关闭按钮,把这些元件选中,转换为动态面板,设置为隐藏状态,并且命名该动态面板为add。
  (6)类似步骤5,制作修改弹出窗口,但是要注意,在修改窗口里面,编号输入框为禁用(一般来说,编号不能修改)。
  通过上面的6个步骤,我们已经完成了原型的设计。
  交互设计
  (1)设置数据加载:首先我们要做数据初始化,选择中继器的【每项载入】事件,在每项载入的时候,设置中继器的列表里面的值。
  (2)设置分页显示:选中中继器,在样式里面选择分页显示,每页5条记录就可以。
  (3)设置翻页:选中上一页,选择【点击】事件,然后选择中继器动作的【设置当前显示页】事件,并把页面设置为【previous】。
  下一页类似,不同的地方在选择页面设置为【next】。
  (4)新增按钮:点击新增按钮,把隐藏的动态面板add显示出来就可以了,即选择新增按钮的【点击】事件,触发元件的【显示】事件。
  (5)新增保存:点击新增保存的时候,需要做两件事情:
  把录入的数据保存到数据中继器对应的数据源;
  关闭新增弹窗。
  对于A,使用中继器的新增记录动作完成;对于B,使用隐藏该动态面板动作实现。
  (6)修改数据:修改数据与新增数据类似,但是有一点差别,就在弹出的修改窗口里面,要显示对应修改记录,这里需要在显示修改窗口之前,对修改窗口里面的数据进行赋值。
  (7)修改保存:修改保存与新增保存类似,都要完成两个动作:
  把修改的数据保存到数据中继器对应的数据源;
  关闭新增弹窗。
  对于A,使用中继器的修改记录动作完成;对于B,使用隐藏该动态面板动作实现。
  (8)删除:删除相对简单,直接通过删除按钮的点击事件,触发中继器的删除动作即可。
  (9)排序:排序功能是通过中继器里面的添加排序事件类完成的,即设置排序按钮的点击事件,从而触发中继器添加排序的动作。这里要注意一点,因为每点击一下排序按钮,是按照升序降序切换的,所以排序要选切换。
  总结
  通过上面这个简答的例子,详细讲述了中继器的使用方法,中继器是一个功能强大的元件,各位同学还需要在具体的项目中多多实践。
投诉 评论 转载

分版本注释法:如何迭代你的产品文档更省成本?因一直使用Axure来写写画画产品文档,就借Axure来说明,如何迭代产品文档更省成本。设计产品,自然不仅是画图,更重要的是框定规则,而规则,通过注释的方式展示给团队或客……Axure教程:实现秒表循环本文是教大家如何制作秒表循环功能,一起来看看最近再做一个播放音乐的原型,在做播放界面时遇到了一个问题,就是怎么实现播放时间秒表的循环及开始暂停。虽然上网查了不少资料,但对……AxureRP9教程:建行APP账户拖动效果今天简单用动态面板模拟一下建行APP首页银行账户左右拖动的效果,一起来看看效果图本次效果是卡片拖动的效果,在“总资产”状态下,我们能看到总资产情况和“银行卡1的一半……原型设计实战案例:自适应后台框架作者分享了自己做web端产品后台框架的设计过程,希望能够对你的原型设计工作带来帮助。本人前段事件做了专家管理产品的web端产品,按照当时的要求……Axure教程:一个通用的app注册登录页今天给大家分享一套APP注册登录界面模板,其中包括本机登录页面,短信验证登录页面,密码登录页面,人脸登录页面,微博、微信、QQ、支付宝登录页面,注册页面,用户协议和隐私条款。该……Axure教程:中继器实现商品管理列表本文通过一个商品管理的例子,来说明中继器怎么使用。在这个商品管理列表里面,我们要实现商品信息的分页展示、新增、修改、删除和排序功能。中继器是axure里面非常重要的一个元……Axure教程:高级交互顶部栏今天给大家分享如何制作顶部导航栏,enjoy当设计者使用导航或者自定义一些导航结构时,请注意:尽可能提供标识、上下文线索,避免用户迷路;保持导航样式和行为一致……Axure教程:冰球小游戏年底了,闲来无事,逛产品网站时看到一些大佬的小游戏制作教程,受益匪浅,突发奇想,做了一个冰球类的小游戏与大家交流学习。游戏玩法少废话,先看东西冰球游戏……产品必会的30个Axure使用技巧对于Axure原型工具,很少有产品经过系统学习,一般都是直接上手,边摸索边学习,这直接导致很多快捷操作被忽视。笔者在日常工作中总结出以下小技巧,希望对各位有帮助。1。nb……Axure教程:导航栏如何根据滚动条同步选中?本文给大家介绍的是导航栏如何根据滚动条同步选中,一起来看看实现效果:选中导航栏中的菜单,窗口内容显示对应的内容;窗口滚动时,选中导航栏对应的菜单。创建导航栏(……中继器系列(四):正反倒计时元件的实现彩蛋篇:获取本机时间,开始24小时倒计时思路:点击触发事件后,获取电脑本地的时间。通过分别获取电脑本地的时、分、秒,进行计算剩余时间。小时通过23减去当前的小……Axure教程:页面拖动效果今天我们来介绍一个简单的基本交互页面拖动。看如何实现页面拖动效果,enjoy想必有不少做移动端的新手同学都有这么一个烦恼,页面想展现手机内容可以上下滑动,但却无法实现,只……
职场心灵鸡汤语录职场心灵鸡汤语录职场的语录38条职场的语录55条简短的职场的语录简洁的职场正能量的语录68条职场的语录45条常用职场的语录摘录36条职场正能量的语录98条简单的职场正能量的语录96条职场心灵鸡汤语录摘录33条职场的语录96条

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界