最近開始捯飭Axure，剛做完一個自認(rèn)為比較簡單的表單，大概完整耗時3天……發(fā)現(xiàn)中繼器里面還是有很多坑。

主要界面

預(yù)期實現(xiàn)功能

1. 選中每一行，bak（最后一列）出現(xiàn)當(dāng)前行匯總價格，totalPrice自動匯總；
2. 選中三行后，自動選中chk-all；
3. 取消選中行，自動取消選中chk-all，且匯總價出現(xiàn)變化；
4. 選中/取消選中（含單擊、選中）chk-all，自動選中/取消選中所有行，且價格變化正確；

簡要思路

選中每行可以有三種方案

• 選中isChosen
• 單擊isChosen
• 單擊InfoCombo

最初為了方便，選擇了第三種，事件中內(nèi)容比較簡單，主要是totalPrice計算公式如圖：

另外，為了滿足自動判斷，初始化全局變量Init為0，用于計算是否需要勾選chk-all，主要邏輯如下：

1. 選中一行，Init=[[Init+1]]，并計算當(dāng)前行的總價；
2. 取消選中當(dāng)前行，Init=[[Init-1]]；
3. 選中chk-all，Init=repeater.dataCount（語法將就看下）；
4. 取消選中chk-all，Init=0；

接下來，問題來了。

選中chk-all的時候，如何匯總價格？由于InfoCombo只有“單擊”事件，chk-all的事件中沒有“單擊”，無法觸達每行的計算行為，第三種方案不行；（暫時認(rèn)為不行）

換方案2，isChosen的單擊事件，剛開始就遇到坑；這貨對于條件的解讀居然是反的。。。網(wǎng)上查到資料解釋如下：

復(fù)選框部件支持OnClick事件用于響應(yīng)單擊操作，在OnClick事件中可以依據(jù)復(fù)選框部件的狀態(tài)執(zhí)行 相應(yīng)的動作。但需要注意的時，在此處判斷復(fù)選框的狀態(tài)得到的是單擊后的復(fù)選框的狀態(tài)，例如復(fù)選框處于未選中狀態(tài)，在OnClick事件中，該復(fù)選框已處于 選中狀態(tài)，如果復(fù)選框處于選中狀態(tài)，在OnClick事件中，該復(fù)選框已處于未選中狀態(tài)。

不過繞過這個坑后，由于出現(xiàn)跟方案3類似的情況，仍舊無法匯總價格。

最后回到方案1：選中isChosen復(fù)選框時進行計算；

另外，選擇“單擊”chk-all來觸發(fā)每行的選中事件，如果使用“選中/未選中”，則會出現(xiàn)前者的未選中事件觸發(fā)后者的未選中，導(dǎo)致異常。

關(guān)鍵配置如下：

（1）每行

（2）chk-all

從表面上看，應(yīng)該沒問題了，開始生成頁面測試，出現(xiàn)如下幺蛾子：

選中復(fù)選框的時候，“選中”事件觸發(fā)了兩次，前思后想，結(jié)合第一個方案判斷，應(yīng)該是：選中復(fù)選框的時候，同時算作選中了repeater的當(dāng)前行（含復(fù)選框）。所以僅靠第一個方案仍然無法實現(xiàn)價格匯總，接下來想到方案四，使用單擊計算Init，選中計算價格，不過由于選中觸發(fā)兩次，價格匯總有一定難度；

最后回到最初的方案，發(fā)現(xiàn)“由于InfoCombo只有“單擊”事件，chk-all的事件中沒有“單擊””這個思路可能有點問題，chk-all單擊時應(yīng)該能嵌套一個事件。之后，需要設(shè)置一個標(biāo)志位flag來表示單擊事件是否是由chk-all觸發(fā)，否則在單擊某行之后再去單擊chk-all，該行會取消選擇；

關(guān)鍵設(shè)置

chk-all單擊設(shè)置（注意allFlag的還原）

每行單擊事件設(shè)置

實現(xiàn)效果

總結(jié)

1. 正文中標(biāo)粗部分；
2. 復(fù)選框/全選框之間在點擊時的互斥關(guān)系，一定要提前想清楚；（體現(xiàn)在標(biāo)志位使用完之后的重置）

本文由 @盜不留蘅 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。