本文通過一個商品管理的例子，來說明中繼器怎么使用。在這個商品管理列表里面，我們要實現(xiàn)商品信息的分頁展示、新增、修改、刪除和排序功能。

中繼器是axure里面非常重要的一個元件，通過中繼器，可以實現(xiàn)數(shù)據(jù)的動態(tài)查詢、新增、修改、刪除、排序、分頁等功能，直接說吧，數(shù)據(jù)動態(tài)展示的那一套東西都可以通過中繼器實現(xiàn)。

下面，我就通過一個商品管理的例子，來說明中繼器怎么使用。在這個商品管理列表里面，我們要實現(xiàn)商品信息的分頁展示、新增、修改、刪除和排序功能。

我們先看看最終實現(xiàn)的效果：

需求分析

在上面的例子，我們需要實現(xiàn)如下幾個效果：

1. 能夠分頁顯示商品列表，每頁顯示5個商品；
2. 店家新增按鈕，能夠新增商品；
3. 點擊價格排序，能夠按照價格排序，并且升序、降序可以自動切換；
4. 點擊修改，能夠在彈出頁面展示所選中的商品信息，修改完成以后，點擊保存按鈕，修改的數(shù)據(jù)能夠保存；
5. 點擊刪除按鈕，能夠刪除所選的記錄。

原型設計

（1）我們先在畫布區(qū)拖入一個中繼器，并且命名該中繼器是datalist，然后在中繼器里面增加增加6個列，分別是編號、商品名稱、價格、庫存以及兩個操作列。

（2）設置中繼器對應的數(shù)據(jù)集合，該數(shù)據(jù)集包含4個列，分別是code、name、price、num，分別對應商品編號、商品名稱、價格和庫存，然后錄入模擬數(shù)據(jù)。

（3）在左上角?拖入兩個按鈕，分別是新增和?價格排序。

（4）在有下方拖入兩個文字標簽，分別改成上一頁、下一頁。

（5）制作新增彈出窗口，在畫布里面拖入4個輸入框及對應的文字標簽，并且拖入保存和關閉按鈕，把這些元件選中，轉(zhuǎn)換為動態(tài)面板，設置為隱藏狀態(tài)，并且命名該動態(tài)面板為add。

（6）類似步驟5，制作修改彈出窗口，但是要注意，在修改窗口里面，編號輸入框為禁用（一般來說，編號不能修改）。

通過上面的6個步驟，我們已經(jīng)完成了原型的設計。

交互設計

（1）設置數(shù)據(jù)加載：首先我們要做數(shù)據(jù)初始化，選擇中繼器的【每項載入】事件，在每項載入的時候，設置中繼器的列表里面的值。

（2）設置分頁顯示：選中中繼器，在樣式里面選擇分頁顯示，每頁5條記錄就可以。

（3）設置翻頁：選中?上一頁，選擇【點擊】事件 ，?然后選擇中繼器動作的【設置當前顯示頁】事件，并把頁面設置為【previous】。

下一頁類似，不同的地方在選擇頁面設置為【next】。

（4）新增按鈕：點擊新增按鈕，把隱藏的動態(tài)面板add顯示出來就可以了，即選擇新增按鈕的【點擊】事件，觸發(fā)元件的【顯示】事件。

（5）新增保存：點擊新增保存的時候，需要做兩件事情：

• 把錄入的數(shù)據(jù)保存到數(shù)據(jù)中繼器對應的數(shù)據(jù)源；
• 關閉新增彈窗。

對于A，使用中繼器的新增記錄動作完成；對于B，使用隱藏該動態(tài)面板動作實現(xiàn)。

（6）修改數(shù)據(jù)：修改數(shù)據(jù)與新增數(shù)據(jù)類似，但是有一點差別，就在彈出的修改窗口里面，要顯示對應修改記錄，這里需要在顯示修改窗口之前，對修改窗口里面的數(shù)據(jù)進行賦值。

（7）修改保存：修改保存與新增保存類似，都要完成兩個動作：

• 把修改的數(shù)據(jù)保存到數(shù)據(jù)中繼器對應的數(shù)據(jù)源；
• 關閉新增彈窗 。

對于A，使用中繼器的修改記錄動作完成；對于B，使用隱藏該動態(tài)面板動作實現(xiàn)。

（8）刪除：刪除相對簡單，直接通過刪除按鈕的點擊事件，觸發(fā)中繼器的刪除動作即可。

（9）排序：排序功能是通過中繼器里面的添加排序事件類完成的，即設置排序按鈕的點擊事件，從而觸發(fā)中繼器添加排序的動作。這里要注意一點，因為每點擊一下排序按鈕，是按照升序降序切換的，所以排序要選切換。

總結

通過上面這個簡答的例子，詳細講述了中繼器的使用方法，中繼器是一個功能強大的元件，各位同學還需要在具體的項目中多多實踐。

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

題圖來自Unsplash，基于CC0協(xié)議