今天，教大家如何用AXURE做一個(gè)管理后臺(tái)頁(yè)面框架。

本文以員工信息為案例，展示中繼器增、刪、改、查+導(dǎo)入+導(dǎo)出+排序的真實(shí)效果。包括直接在中繼器修改和彈出頁(yè)面修改兩種模式，只需要導(dǎo)入數(shù)據(jù)，就可以直接使用。

在線演示地址：http://90ymyy.axshare.cn/#g=1&p=案例員工信息（同一頁(yè)面維護(hù)）

一、效果介紹

兩種模式均有模板，使用非常簡(jiǎn)單。

用了模板之后，只需要填寫中繼器內(nèi)容，刪除不需要的搜索/篩選框，修改文本框提示文字即可使用。

篩選條件不用自己寫，系統(tǒng)能自動(dòng)根據(jù)中繼器內(nèi)容自動(dòng)添加（由于模板篩選的中繼器較多，所以加載大約需要10秒時(shí)間，請(qǐng)耐心等待，刪除不需要的篩選條件后反應(yīng)很迅速，如案例）。

模板如下：

1. 查詢：包括模糊搜索和篩選，輸入或選擇后，點(diǎn)擊查詢按鈕即可查詢

1）模糊查詢

能對(duì)中繼器列表每一列進(jìn)行模糊搜索，不需要的搜索框直接刪除即可。

2）篩選

根據(jù)列表自動(dòng)生成篩選內(nèi)容，不會(huì)重復(fù)添加，不需要的篩選框直接刪除即可。選擇后需點(diǎn)擊查詢按鈕。

3）重置

點(diǎn)擊后清空搜索框和篩選條件。

2. 添加：添加完成后會(huì)更新到中繼器列表

1）直接在列表添加

2）彈出窗口添加

3. 編輯：和新增一樣，可以直接在頁(yè)面修改，也可以在彈窗修改，修改完后會(huì)更新到中繼器

點(diǎn)擊編輯按鈕或雙擊所在行即可進(jìn)入編輯。

1）接在列表編輯

2）彈出窗口編輯

4. 刪除：可以單獨(dú)刪除，或者多選后批量刪除

5. 導(dǎo)入：可以模擬選擇文件

6. 導(dǎo)出：可以真實(shí)下載excel文件模板

7. 排序：可以升降序切換，模板提供每一列的升降效果，可根據(jù)具體情況使用

8. 頁(yè)數(shù)和條數(shù)：會(huì)根據(jù)添加和刪除自動(dòng)更新，能選擇每頁(yè)顯示條數(shù)

二、制作方法

1. 材料準(zhǔn)備

輸入框，下拉多選框，按鈕，上下箭頭。

2. 邏輯思路

將中部每一列的內(nèi)容，傳到每個(gè)多選框內(nèi)，選中多選框。然后其他的就是中繼器的增刪改查的內(nèi)容了。

3. 具體交互

1）查詢

2）新增

3）編輯

4）刪除

5）導(dǎo)入

6）導(dǎo)出

7）排序

8）翻頁(yè)

該原型非常實(shí)用，但制作相對(duì)復(fù)雜，新手不容易完成。

制作完成后，以后使用方便，僅需簡(jiǎn)單填寫樹(shù)中繼器的內(nèi)容，即可擁有完美的效果，所以強(qiáng)烈推薦給各位使用。

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

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