編輯導語:當工作中需要進行列表複選操作時,我們可以如何使用Axure來進行相關操作呢?本篇文章裡,作者利用中繼器為我們展示了列表複選操作,讓我們一起來看一下。
所需元件:
- 中繼器:表單製作;
- 文字框:表頭製作;
- 複選框:複選交互制作。
思路:基於中繼器中的複選狀態進行賦值,並基於整體列表的狀態值進行換算,得出全選的臨界值公式。
教程如下。
一、中繼器的複選賦值因列表載入時,預設均為未選中狀態,且初期設定為“未選中”時,狀態值為“-1”,“已選中”時,狀態值為“1”,因此狀態值在載入時,賦值為“-1”。
如上圖,設定複選框未選中時,在進行點選時,設定複選框為“已選”狀態,同時給予狀態值賦予 [[State*(-1)]];即在“未選中”狀態時,將狀態切換到“已選中”狀態時,將狀態值設定為“1”。
同理,在選中時,給予狀態值賦予 [[State*(-1)]];即在“已選中”狀態時,將狀態切換到“未選中”狀態時,將狀態值設定為“-1”。
二、彙總中繼器中的狀態值當狀態值發生變化時,更新狀態值的總值,公式如下:[[Count.slice(0)-Exstate+State]]。
前狀態值在狀態值發生變化時,透過賦值獲取,如上圖所示。
三、設定全選操作時的狀態及賦值需要注意的是,當全選設定在“中間”狀態切換到“全選”狀態時,需要將中繼器中的狀態值,統一設定為“1”。
四、計算中繼器中複選框對全選款的影響臨界值在【第三步】當中,我們已經可以獲取到狀態值在每次變化時的總數,因此透過這個總數去判斷中繼器中何時會影響到全選框的狀態;判斷條件如下:
當中繼器中的複選框從“未選”設定為“已選”狀態時,若滿需條件 [[Item.Repeater.itemCount-2]],則需要將全選框同步設定為“選中”狀態,否則,僅需將全選框設定為“中間”狀態。
當中繼器中的複選框從“已選”設定為“未選”狀態時,若滿需條件 [[Item.Repeater.itemCount*(-1)+2]],則需要將全選框同步設定為“未選”狀態,否則,僅需將全選框設定為“中間”狀態。
本文由@Sam 原創釋出於人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash, 基於CC0協議。