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確實也就是個工具,仁兄說的極是 ??
文字多,如果有鏈接,將原型放在網盤,邊操作邊看會更好??
http://url.cn/5Grp25U ??