【Axure 教程】中繼器,你這個“渣男”(實戰篇)
中繼器是 Axure 中相對較難上手的一個元件,但是一旦熟練掌握后,可以讓產品經理在做一些重復性設計比較多的頁面時,獲得事半功倍的效果,本文主要通過講解中繼器的屬性和事件,帶你初窺中繼器的世界。
當你掌握了中繼器的用法,在做一些重復性設計的頁面的時候,可以獲得事半功倍的效果,令你心情愉悅;但是你會發現中繼器與“渣男”一樣,難以掌握,它不僅“渣”,而且“雜”,復雜,要真正運用好中繼器有一定的難度,本篇文章將告訴你中繼器的各種特性,教你將中繼器這個“渣男”拿捏。
本文是中繼器教程的最后一篇,也是綜合運用實戰,如果你對中繼器的使用還不是很熟悉,甚至之前都沒有用過中繼器,建議先看前面的“基礎篇”和“進階篇”,否則閱讀本文對你來說會有點吃力。
傳送門:
本次我們的實戰項目是做一個學生管理表,以下是界面截圖:
一、界面設計
界面這塊非常簡單,最上面是查詢條件和添加按鈕,中間的表格是一個中繼器,最下面是分頁操作,還有一個隱藏的彈窗,用來添加和修改數據用的。
中繼器里面放了一行表格,為了方便我們待會能快速找到對應的單元格填入數據,建議給每個單元格做好命名:
中繼器的字段如下,為了方便演示,我在中繼器內放了100行數據:
最后我們還需要幾個相對應的全局變量,其中需要注意的是【add_or_update】這個變量,由于我這里設計的添加和編輯用的是同一個彈窗,所以需要一個變量來告訴系統當前正在做的操作是添加還是編輯:
二、載入數據
載入數據非常簡單,只需要給【中繼器】添加【每項加載時】的事件,將各個字段的值填入到對應的單元格即可:
但你會發現,這里并沒有一次性加載全部的100條數據,而是只加載了其中的10條:
這是因為我在中繼器載入的時候,做了一個分頁,每頁的數據條數獲取的是下方分頁板塊中的【每頁數據條數】的默認值:
【每頁數據條數】除了默認的10條,里面還有其他的選項:
為了實現修改選項時,能夠根據所選擇的選項改變每頁展示的數據條數,需要給這個下拉框添加【選項改變時】的事件:
這樣當我們切換下拉框的值時,上方列表會根據選項自動展示對應的數據條數:
這里還有個問題,就是列表是動態的,因此分頁的組件位置應該也是跟著列表動態變化的,所以在切換選項的時候,我們需要調整分頁組件的位置:
這里我是在中繼器高度的基礎上增加100,剛好就是圖中看到的效果,同樣,在中繼器載入的時候,我們根據下拉選項調整了列表的高度,所以也需要同步調整分頁組件的位置:
這里在設置每頁數量之后加了一個等待事件,是為了等待中繼器數據加載完成并完成分頁,如果中繼器的數據還沒有加載完成,就移動分頁組件,可能會導致分頁組件放置的位置不對。
三、分頁
接下來我們來看看分頁組件的其他操作:
【第一頁】很簡單,直接添加【設置當前顯示頁面】的事件,頁面選擇【值】,頁碼設為【1】:
【上一頁】、【下一頁】、【最后一頁】用的也是相同的事件,在【頁面】選項中選擇對應的選項即可:
最后來看看這個頁碼指示器:
這個指示器除了顯示當前的總頁數、所在的頁數,還具有快捷跳轉頁面的功能:
為了使這個指示器能動態顯示總頁數和所在頁數,我們需要在中繼器的每項加載時給這個指示器的輸入框設置文本,文本內容如下截圖,兩個參數我在“進階篇”中講過,前面是顯示當前所在頁數,后面的是總頁數:
接著我們給這個指示器添加事件:
- 獲得焦點時,清空內容,等待輸入頁碼;
- 失去焦點時,顯示所在頁數和總頁數
- 如果輸入不為空且按下了【回車】鍵,則跳轉到所輸入的頁碼的頁面
到這里整個分頁的功能就做完了。
四、查詢
查詢按鈕比較簡單,只是得區分場景,由于我們提供了兩個查詢條件,但是查詢時不一定都會輸入,所以需要判斷具體提供了多少個條件:
- 只提供了姓名,只按姓名查詢
- 只提供了年級,只按年級查詢
- 同時提供了姓名和年級,則按兩個條件查詢
注意添加篩選的時候,不要選擇【移除其他篩選】。
重置很簡單,就是移除所有篩選條件,然后把兩個查詢條件清空或置為默認:
五、添加和修改
刪除我就不講了,太簡單,在“進階篇”已經講過了,接下來講講添加和修改。
以下是添加和修改彈窗:
點擊添加時,顯示彈窗,并把所有字段內容清空,下拉選項設置為默認值,并且給變量【add_or_update】設置為【add】,表示我們準備做添加操作:
點擊編輯的邏輯跟添加差不多,不過一般編輯時我們需要填入已有的信息,所以這里我們給幾個字段填入當前行的數據,并且給變量【add_or_update】設置為【update】,表示我們準備做修改操作,同時需注意,這里我們還需要先取消所有行的標記(確保不會有其他行被標記),再標記當前行(確保能知道當前準備修改的行):
接下來是添加、修改彈窗,當我們在彈窗中修改信息或修改選項的時候,對應的值會同步給對應的全局變量:
接下來是保存按鈕的事件:
直接根據【add_or_update】的值來判斷當前是做添加還是修改,如果是添加,直接往中繼器中添加行,如果是修改,則是更新當前標記的行,更新之后,再取消所有行的標記。
添加和修改的數據源直接設為對應的全局變量即可:
最后是取消和關閉按鈕的事件,直接隱藏彈窗并取消所有行的標記即可:
好了,以上就是本次中繼器的實戰項目,如果大家想更好地掌握好中繼器的使用,記得多找一些項目來多做練習即可。
如果文章對你有幫助,不妨點個“收藏”或“喜歡”,也歡迎關注我,一個不務正業的產品經理,感謝閱讀!
本文由 @產品錦李 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
您講的很詳細,感謝分享,但是我有一個困惑:用中繼器做表格有必要么?做一個靜態表格,再加一句話描述就能說清的事情,為什么用中繼器這么復雜的操作和代碼?大家對表格增刪改查、翻頁等等操作再熟悉不過了有必要做這么復雜么?我實在是困惑,中繼器存在的意義到底是什么?
老師 跟著教程學習時發現分頁組件移動位置問題
移動設置y坐標為this.height+100 會更好,因為這個中繼器可能不是直接放在最上面的
感謝建議,固定數值在設計中確實比較容易受到各種因素的影響
體驗傳送門:https://axhub.im/ax9/337ca0d77182766f/#g=1