原标题:Axure学习笔记:中继器之价格统计

最近开始捯饬Axure,刚做完一个自认为比较简单的表单,大概完整耗时3天……发现中继器里面还是有很多坑。

主要界面

预期实现功能

选中每一行,bak(最后一列)出现当前行汇总价格,totalPrice自动汇总;

选中三行后,自动选中chk-all;

取消选中行,自动取消选中chk-all,且汇总价出现变化;

选中/取消选中(含单击、选中)chk-all,自动选中/取消选中所有行,且价格变化正确;简要思路

选中每行可以有三种方案

选中isChosen

单击isChosen

单击InfoCombo

最初为了方便,选择了第三种,事件中内容比较简单,主要是totalPrice计算公式如图:

另外,为了满足自动判断,初始化全局变量Init为0,用于计算是否需要勾选chk-all,主要逻辑如下:

选中一行,Init=[[Init+1]],并计算当前行的总价;

取消选中当前行,Init=[[Init-1]];

选中chk-all,Init=repeater.dataCount(语法将就看下);

取消选中chk-all,Init=0;

接下来,问题来了。

选中chk-all的时候,如何汇总价格?由于InfoCombo只有“单击”事件,chk-all的事件中没有“单击”,无法触达每行的计算行为,第三种方案不行;(暂时认为不行)

换方案2,isChosen的单击事件,刚开始就遇到坑;这货对于条件的解读居然是反的。。。网上查到资料解释如下:

复选框部件支持OnClick事件用于响应单击操作,在OnClick事件中可以依据复选框部件的状态执行 相应的动作。但需要注意的时,在此处判断复选框的状态得到的是单击后的复选框的状态,例如复选框处于未选中状态,在OnClick事件中,该复选框已处于 选中状态,如果复选框处于选中状态,在OnClick事件中,该复选框已处于未选中状态。

不过绕过这个坑后,由于出现跟方案3类似的情况,仍旧无法汇总价格。

最后回到方案1:选中isChosen复选框时进行计算;

另外,选择“单击”chk-all来触发每行的选中事件,如果使用“选中/未选中”,则会出现前者的未选中事件触发后者的未选中,导致异常。

关键配置如下:

(1)每行

(2)chk-all

从表面上看,应该没问题了,开始生成页面测试,出现如下幺蛾子:

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

最后回到最初的方案,发现“由于InfoCombo只有“单击”事件,chk-all的事件中没有“单击””这个思路可能有点问题,chk-all单击时应该能嵌套一个事件。之后,需要设置一个标志位flag来表示单击事件是否是由chk-all触发,否则在单击某行之后再去单击chk-all,该行会取消选择;

关键设置

chk-all单击设置(注意allFlag的还原)

每行单击事件设置

实现效果

总结

正文中标粗部分;

复选框/全选框之间在点击时的互斥关系,一定要提前想清楚;(体现在标志位使用完之后的重置)

本文由 @盗不留蘅 原创发布于人人都是产品经理。未经许可,禁止转载。

责任编辑:

axure中继器求和_Axure学习笔记:中继器之价格统计相关推荐

  1. OpenCV 学习笔记-day13 像素值统计 统计计算最大最小值,平均值和标准差 (minMaxLoc()和meanStdDev()函数的使用)

    OpenCV 学习笔记 day13 像素值统计 函数 minMaxLoc(); 最大值最小值统计 meanStdDev();平均值和标准方差统计 代码 day13 像素值统计 函数 minMaxLoc ...

  2. php怎么统计流量,PHP学习笔记:php网络流量统计系统

    PHP学习笔记:php网络流量统计系统 说明:代码来源<PHP和MySQL Web应用开发>一书,还有就是代码有些是经过修改的,经过我的测验全部都可以用. 这里面ip地址显示的正常的,我电 ...

  3. python分组求和_Python学习笔记之pandas索引列、过滤、分组、求和功能示例

    本文实例讲述了Python学习笔记之pandas索引列.过滤.分组.求和功能.分享给大家供大家参考,具体如下: 前面我们已经把519961(基金编码)这种基金的历史净值明细表html内容抓取到了本地, ...

  4. axure 中继器标记行_动作中继标记

    axure 中继器标记行 Meta tags can also be used to cause actions in the browser itself. The most common is t ...

  5. axure中继器求和_如何利用Axure中继器,实现商品数量增减、价格总计效果

    本文详细讲解:利用Axure中继器实现商品数量的增减,以及商品价格的总计的操作流程. 一般在做购物车.预算表中都会涉及到商品数量的增减,与商品价格的合计. 那么,我们怎么通过中继器来实现这个效果呢?本 ...

  6. 统计学习笔记(1)——统计学习方法概论

    1.统计学习 统计学习是关于计算机基于数据构建概率统计模型并运用模型对数据进行预测与分析的一门学科,也称统计机器学习.统计学习是数据驱动的学科.统计学习是一门概率论.统计学.信息论.计算理论.最优化理 ...

  7. 统计学习方法 学习笔记(1)统计学习方法及监督学习理论

    统计学习方法及监督学习理论 1.1.统计学习 1.1.1.统计学习的特点 1.1.2.统计学习的对象 1.1.3.统计学习的目的 1.1.4.统计学习的方法 1.1.5.统计学习的研究 1.1.6.统 ...

  8. Linux学习笔记 -- 文本编辑器之 vi与vim

    vi/vim 的使用 基本上 vi/vim 共分为三种模式,分别是命令模式(Command mode),插入模式(Insert mode)和底线命令模式(Last line mode). 这三种模式的 ...

  9. JSON和异步AJAX请求和i18n学习笔记

    目录: JSON传送 AJAX传送 i18n传送 JSON 返回目录 1.什么是JSON? JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和 ...

  10. STM32基础学习笔记寄存器之GPIO(1)

    文章目录 关于GPIO寄存器配置心得 1.寄存器知识 1.1 寄存器主要类型 1.2 寄存器功能详解析 1.2.1 GPIO 端口模式寄存器* 1.2.2 GPIO 端口输出类型寄存器* 1.2.3 ...

最新文章

  1. 用snap在ubuntu上构建 Microk8s,使用kubectl,部署应用
  2. C# — 通过点击回车执行任务
  3. Spring注解之 @SuppressWarnings注解
  4. jquery 获取某个值得键名_jQuery获取元素索引值index()方法
  5. Visual Studio 2013开发 mini-filter driver step by step (1) - 创建 mini filter driver 工程
  6. JS(JavaScript) 使用捕获性分组处理文本模板,最终生成完整字符串
  7. CMapStringToPtr::SetAt\CAsyncSocket
  8. 史上最清楚的BP算法详解
  9. 数组索引必须为正整数或逻辑值_LeeCode457-环形数组循环
  10. 如何在 Apple TV 上安装 tvOS 15 developer beta 9?
  11. Java 线程池 Executor浅入浅出
  12. 【牛客网刷题】(第二弹)中等难度题型来了.这些题你都会做吗?
  13. 超级计算机浪漫展览,这是最独特的“中国式浪漫”
  14. 刺骨寒江合力托举老人上岸
  15. Java Fx 使用详解
  16. 客户/供应商主数据批导
  17. 服务器所属文件变成nobody,NFS使用autofs挂接后文件属主显示为nobody
  18. Ubuntu部署轻量化工具supervisor
  19. DNS 劫持和DNS 污染
  20. 第五周-css3重点总结

热门文章

  1. Windows XP支持的最大内存是多少?
  2. Emulex公司介绍
  3. FCRD-P帆软考试总结
  4. iOS-苹果官方开源网站;objc、Runloop、GCD、OC等开源代码
  5. 贴吧自动签到脚本linux,【渣作】shell脚本百度贴吧签到器
  6. Johnnie Walker惊艳的广告
  7. 根据日期算星座 mysql,Hive 通过日期计算星座实例
  8. JavaScript Object 对象方法总结
  9. Linux下dislocate命令用法,技术|在 Linux 中遨游手册页的海洋
  10. 每年都要调两次时间,美国人已经烦透了