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

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

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

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

需求分析

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

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

原型設(shè)計(jì)

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

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

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

（4）在有下方拖入兩個(gè)文字標(biāo)簽，分別改成上一頁、下一頁。

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

（6）類似步驟5，制作修改彈出窗口，但是要注意，在修改窗口里面，編號(hào)輸入框?yàn)榻茫ㄒ话銇碚f，編號(hào)不能修改）。

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

交互設(shè)計(jì)

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

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

（3）設(shè)置翻頁：選中?上一頁，選擇【點(diǎn)擊】事件 ，?然后選擇中繼器動(dòng)作的【設(shè)置當(dāng)前顯示頁】事件，并把頁面設(shè)置為【previous】。

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

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

（5）新增保存：點(diǎn)擊新增保存的時(shí)候，需要做兩件事情：

• 把錄入的數(shù)據(jù)保存到數(shù)據(jù)中繼器對(duì)應(yīng)的數(shù)據(jù)源；
• 關(guān)閉新增彈窗。

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

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

（7）修改保存：修改保存與新增保存類似，都要完成兩個(gè)動(dòng)作：

• 把修改的數(shù)據(jù)保存到數(shù)據(jù)中繼器對(duì)應(yīng)的數(shù)據(jù)源；
• 關(guān)閉新增彈窗 。

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

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

（9）排序：排序功能是通過中繼器里面的添加排序事件類完成的，即設(shè)置排序按鈕的點(diǎn)擊事件，從而觸發(fā)中繼器添加排序的動(dòng)作。這里要注意一點(diǎn)，因?yàn)槊奎c(diǎn)擊一下排序按鈕，是按照升序降序切換的，所以排序要選切換。

總結(jié)

通過上面這個(gè)簡(jiǎn)答的例子，詳細(xì)講述了中繼器的使用方法，中繼器是一個(gè)功能強(qiáng)大的元件，各位同學(xué)還需要在具體的項(xiàng)目中多多實(shí)踐。

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

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