Axure学习笔记:中继器避坑指南之价格统计

2018-03-2414:14:44原型设计Comments2,246 views字数 1275阅读模式

主要界面

Axure学习笔记:中继器避坑指南之价格统计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

Axure学习笔记:中继器避坑指南之价格统计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

Axure学习笔记:中继器避坑指南之价格统计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

预期实现功能

  1. 选中每一行,bak(最后一列)出现当前行汇总价格,totalPrice自动汇总;
  2. 选中三行后,自动选中chk-all;
  3. 取消选中行,自动取消选中chk-all,且汇总价出现变化;
  4. 选中/取消选中(含单击、选中)chk-all,自动选中/取消选中所有行,且价格变化正确;

简要思路

选中每行可以有三种方案

  • 选中isChosen
  • 单击isChosen
  • 单击InfoCombo

最初为了方便,选择了第三种,事件中内容比较简单,主要是totalPrice计算公式如图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

Axure学习笔记:中继器避坑指南之价格统计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

另外,为了满足自动判断,初始化全局变量Init为0,用于计算是否需要勾选chk-all,主要逻辑如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

  1. 选中一行,Init=[[Init+1]],并计算当前行的总价;
  2. 取消选中当前行,Init=[[Init-1]];
  3. 选中chk-all,Init=repeater.dataCount(语法将就看下);
  4. 取消选中chk-all,Init=0;

接下来,问题来了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

选中chk-all的时候,如何汇总价格?由于InfoCombo只有“单击”事件,chk-all的事件中没有“单击”,无法触达每行的计算行为,第三种方案不行;(暂时认为不行)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

换方案2,isChosen的单击事件,刚开始就遇到坑;这货对于条件的解读居然是反的。。。网上查到资料解释如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

复选框部件支持OnClick事件用于响应单击操作,在OnClick事件中可以依据复选框部件的状态执行 相应的动作。但需要注意的时,在此处判断复选框的状态得到的是单击后的复选框的状态,例如复选框处于未选中状态,在OnClick事件中,该复选框已处于 选中状态,如果复选框处于选中状态,在OnClick事件中,该复选框已处于未选中状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

不过绕过这个坑后,由于出现跟方案3类似的情况,仍旧无法汇总价格。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

最后回到方案1:选中isChosen复选框时进行计算;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

另外,选择“单击”chk-all来触发每行的选中事件,如果使用“选中/未选中”,则会出现前者的未选中事件触发后者的未选中,导致异常。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

关键配置如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

(1)每行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

Axure学习笔记:中继器避坑指南之价格统计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

(2)chk-all文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

Axure学习笔记:中继器避坑指南之价格统计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

从表面上看,应该没问题了,开始生成页面测试,出现如下幺蛾子:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

Axure学习笔记:中继器避坑指南之价格统计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

选中复选框的时候,“选中”事件触发了两次,前思后想,结合第一个方案判断,应该是:选中复选框的时候,同时算作选中了repeater的当前行(含复选框)。所以仅靠第一个方案仍然无法实现价格汇总,接下来想到方案四,使用单击计算Init,选中计算价格,不过由于选中触发两次,价格汇总有一定难度;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

最后回到最初的方案,发现“由于InfoCombo只有“单击”事件,chk-all的事件中没有“单击””这个思路可能有点问题,chk-all单击时应该能嵌套一个事件。之后,需要设置一个标志位flag来表示单击事件是否是由chk-all触发,否则在单击某行之后再去单击chk-all,该行会取消选择;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

关键设置

chk-all单击设置(注意allFlag的还原文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

Axure学习笔记:中继器避坑指南之价格统计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

每行单击事件设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

Axure学习笔记:中继器避坑指南之价格统计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

实现效果

Axure学习笔记:中继器避坑指南之价格统计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

Axure学习笔记:中继器避坑指南之价格统计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html

总结

  1. 正文中标粗部分;
  2. 复选框/全选框之间在点击时的互斥关系,一定要提前想清楚;(体现在标志位使用完之后的重置)
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2416.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/2416.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定