編輯導讀：本文作者為大家分享了一組Axure中繼器常用交互模板，作者從預覽原型，到所需原件，再到操作步驟都一一展開了分析，并對過程中需要注意的問題進行了介紹，希望對你有所啟發(fā)。

上一期和大家分享了Axure交互大全：Axure全交互模板及視頻教程，收到大家的好評，首先非常感謝大家。那今天就給大家分享多個交互聯(lián)動的教程，主要是關(guān)于中繼器里面全部動態(tài)交互，包括新增、刪除、修改、查詢、篩選、排序、分頁、翻頁、導入、導出等效果，該原型可以作為管理后臺的內(nèi)容模板，讓我們快速完成一個界面，提高工作效率。

原型演示地址：https://xqp24q.axshare.com

開始教學：

01 制作中繼器表格

1.1 頁面材料

矩形——根據(jù)實際的表格內(nèi)容需求，如果需要6列，則放置6個矩形，自行調(diào)整矩形的寬高

修改按鈕和刪除按鈕——后續(xù)制作動態(tài)交互使用

1.2 中繼器表格內(nèi)容

如下圖所示，根據(jù)實際填寫中繼器表格內(nèi)容

1.3 交互

我們要把中繼器表格的內(nèi)容傳給中繼器內(nèi)的矩形

每項加載時——設(shè)置矩形的文本為[[Item.ColumnX]]，X代表列數(shù)，例如第一個矩形，我們設(shè)置其文本為[[Item.Column1]]，第二個矩形，就設(shè)置其文本為[[Item.Column2]]……以此類推

1.4 制作完成后的預覽效果

02 新增行

2.1 頁面材料

• 提交按鈕一個、取消按鈕一個、關(guān)閉按鈕一個。
• 輸入框——N個根據(jù)表格的內(nèi)容的需求
• 下拉列表——N個，根據(jù)報個的內(nèi)容需求

輸入框和下拉列表根據(jù)需要，例如姓名，這種無法選擇的就應該用輸入框，性別這種能選擇的最好就用下拉列表。

如下圖所示擺放美觀即可，然后將以上所有元件組合轉(zhuǎn)為動態(tài)面板（新增面板），固定在瀏覽器居中位置，默認隱藏。

2.2 交互

這里要提到在表格上方有一個添加按鈕，鼠標點擊添加按鈕是，顯示新增面板。

• 取消和關(guān)閉按鈕：鼠標單擊時隱藏新增面板
• 提交按鈕：鼠標單擊提交按鈕時，我們首先要添加行，然后隱藏動態(tài)面板
• 添加行內(nèi)容：[[LVAR1]]是一個變量，如果是Column1，我們設(shè)置[[LVAR1]]=第一個輸入框（下拉列表）的文本值，如果是Column2，我們設(shè)置[[LVAR1]]=第2個輸入框（下拉列表）的文本值……以此類推

這樣就基本完成了添加行的動作了，不過這里要科普一下，一般而言，在提交的時候先要判斷必填項是否填寫正確，如果正確才能提交，不正確的話需要提示用戶重新填寫。

03 修改行

3.1 頁面材料

和新增行一致，可以復制新增面板，然后修改名稱為修改面板。這里注意，一般而言，表格里面需要有一行是唯一編碼的，例如員工號是唯一的，一旦創(chuàng)建不可修改，所以這里可以把第一個輸入框禁用或者用矩形代替

3.2 交互

點擊表格中的修改按鈕：

我們要設(shè)置修改面板里面的輸入框或下拉列表的值為列表對應行的內(nèi)容，這里用設(shè)置文本的交互，如果是第一個輸入框或下拉列表，我們設(shè)置其文本值為[[Item.Column1]]，第2個輸入框或下拉列表，我們設(shè)置其文本值為[[Item.Column2]]……以此類推

設(shè)置文本后，顯示修改面板即可

• 取消和關(guān)閉按鈕：鼠標單擊時隱藏修改面板
• 提交按鈕：鼠標單擊提交按鈕時，我們首先要更新行，然后隱藏動態(tài)面板。

上文提到表格里面需要有一行是唯一編碼的，案例中是行員工號，所以更新行的條件為[[LVAR1==Item.Column1]]，LVAR1是變量，我們選中員工號的輸入框，Column1是表格里面員工號所在的列

更新內(nèi)容：[[LVAR1]]是一個變量，如果是Column1，我們設(shè)置[[LVAR1]]=第一個輸入框（下拉列表）的文本值，如果是Column2，我們設(shè)置[[LVAR1]]=第2個輸入框（下拉列表）的文本值……以此類推

這樣就基本完成了修改行的動作了。同樣，在提交的時候先要判斷必填項是否填寫正確，如果正確才能提交，不正確的話需要提示用戶重新填寫。這個不在中繼器交互的范疇就不展開了。

04 刪除行

點擊表格中的刪除按鈕，執(zhí)行刪除該行的交互即可。

05 查詢

5.1 頁面材料

輸入框1個，搜索按鈕一個，刷新按鈕一個

5.2 交互

一般查詢我們會用模糊查詢，例如我們搜索姓名，輸入張，就能把所有名字里含有張的人查詢出來，這里就是模糊搜索，用篩選事件完成。

如果需要對列表的第一列進行搜索，[[Item.Column1.indexOf(LVAR1)>-1]]，Item.Column1指的是列表的第一列，LVAR1代表輸入框的文字；如果對第二列進行搜索，則為[[Item.Column2.indexOf(LVAR1)>-1]]……以此類推

06 篩選

6.1 頁面材料

下拉列表，這里可以用系統(tǒng)的下拉列表，如果覺得演示比較難看的也可以用自制的下拉列表。

6.2 交互

這里要分兩種情況，如果選擇全部，我們要移除該篩選

如果選擇的不是全部，我們要添加篩選事件，[[Item.ColumnX==this.text]]。例如篩選第一行的時候，即[[Item.Column1==this.text]]，篩選第二行時，即[[Item.Column2==this.text]]……以此類推

07 排序

7.1 頁面材料

• 一個向上的三角形，代表升序
• 一個向下的三角形，代表降序

7.2 交互

點擊升序三角形時，添加排序，屬性選擇表格對應列，例如Column1代表第一列，Column2代表第2列……以此類推，排序類型可以根據(jù)需求選擇number（數(shù)字），text（文本），（date）日期，順序選擇升序。

如果點擊降序三角形，除了順序選擇切換，其他和升序三角形一致。

08 分頁

8.1 頁面材料

矩形n個，里面注明是多少條每頁，例如10條/頁，20條/頁，50條/頁，100條/頁……

8.2 交互

點擊分頁矩形時，設(shè)置中繼器每頁項目數(shù)為矩形顯示的數(shù)目即可。

09 翻頁

9.1 頁面材料

下一頁和上一頁的按鈕，輸入框和確認按鈕

9.2 交互

• 鼠標點擊下一頁按鈕時，設(shè)置中繼器頁面為next
• 鼠標點擊上一頁按鈕時，設(shè)置中繼器頁面為previous
• 鼠標點擊確認按鈕時，設(shè)置中繼器頁面為value，輸入具體頁碼為[[LVAR1]]，即輸入的頁面數(shù)

10 導入和導出

10.1 導入

這里只是模擬導入的效果，選擇一個文本框，類型選擇文件即可。

10.2 導出

這里也是做一個模擬效果，事前需要將文件上傳，然后鼠標單擊導出按鈕時，打開已上傳文件的url地址即可。

以上就是本期分享的全部內(nèi)容，點下關(guān)注不迷路哦，謝謝觀看。

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

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