編輯導讀：本文作者為大家分享了一組Axure中繼器常用交互模板，作者從預覽原型，到所需原件，再到操作步驟都一一展開了分析，並對過程中需要注意的問題進行了介紹，希望對你有所啟發。
上一期和大家分享了Axure交互大全：Axure全交互模板及視頻教程，收到大家的好評，首先非常感謝大家。那今天就給大家分享多個交互聯動的教程，主要是關於中繼器裡面全部動態交互，包括新增、刪除、修改、查詢、篩選、排序、分頁、翻頁、導入、導出等效果，該原型可以作為管理後臺的內容模板，讓我們快速完成一個界面，提高工作效率。
開始教學：
01 製作中繼器表格
1.1 頁面材料
矩形——根據實際的表格內容需求，如果需要6列，則放置6個矩形，自行調整矩形的寬高
修改按鈕和刪除按鈕——後續製作動態交互使用
1.2 中繼器表格內容
如下圖所示，根據實際填寫中繼器表格內容
1.3 交互
我們要把中繼器表格的內容傳給中繼器內的矩形
每項加載時——設置矩形的文本為[[Item.ColumnX]]，X代表列數，例如第一個矩形，我們設置其文本為[[Item.Column1]]，第二個矩形，就設置其文本為[[Item.Column2]]……以此類推
1.4 製作完成後的預覽效果
02 新增行
2.1 頁面材料
提交按鈕一個、取消按鈕一個、關閉按鈕一個。
輸入框——N個根據表格的內容的需求
下拉列表——N個，根據報個的內容需求
輸入框和下拉列表根據需要，例如姓名，這種無法選擇的就應該用輸入框，性別這種能選擇的最好就用下拉列表。
如下圖所示擺放美觀即可，然後將以上所有元件組合轉為動態面板（新增面板），固定在瀏覽器居中位置，默認隱藏。
2.2 交互
這裡要提到在表格上方有一個添加按鈕，鼠標點擊添加按鈕是，顯示新增面板。
取消和關閉按鈕：鼠標單擊時隱藏新增面板
提交按鈕：鼠標單擊提交按鈕時，我們首先要添加行，然後隱藏動態面板
添加行內容：[[LVAR1]]是一個變量，如果是Column1，我們設置[[LVAR1]]=第一個輸入框（下拉列表）的文本值，如果是Column2，我們設置[[LVAR1]]=第2個輸入框（下拉列表）的文本值……以此類推
這樣就基本完成了添加行的動作了，不過這裡要科普一下，一般而言，在提交的時候先要判斷必填項是否填寫正確，如果正確才能提交，不正確的話需要提示用戶重新填寫。
03 修改行
3.1 頁面材料
和新增行一致，可以複製新增面板，然後修改名稱為修改面板。這裡注意，一般而言，表格裡面需要有一行是唯一編碼的，例如員工號是唯一的，一旦創建不可修改，所以這裡可以把第一個輸入框禁用或者用矩形代替
3.2 交互
點擊表格中的修改按鈕：
我們要設置修改面板裡面的輸入框或下拉列表的值為列表對應行的內容，這裡用設置文本的交互，如果是第一個輸入框或下拉列表，我們設置其文本值為[[Item.Column1]]，第2個輸入框或下拉列表，我們設置其文本值為[[Item.Column2]]……以此類推
設置文本後，顯示修改面板即可
取消和關閉按鈕：鼠標單擊時隱藏修改面板
提交按鈕：鼠標單擊提交按鈕時，我們首先要更新行，然後隱藏動態面板。
上文提到表格裡面需要有一行是唯一編碼的，案例中是行員工號，所以更新行的條件為[[LVAR1==Item.Column1]]，LVAR1是變量，我們選中員工號的輸入框，Column1是表格裡面員工號所在的列
更新內容：[[LVAR1]]是一個變量，如果是Column1，我們設置[[LVAR1]]=第一個輸入框（下拉列表）的文本值，如果是Column2，我們設置[[LVAR1]]=第2個輸入框（下拉列表）的文本值……以此類推
這樣就基本完成了修改行的動作了。同樣，在提交的時候先要判斷必填項是否填寫正確，如果正確才能提交，不正確的話需要提示用戶重新填寫。這個不在中繼器交互的範疇就不展開了。
04 刪除行
點擊表格中的刪除按鈕，執行刪除該行的交互即可。
05 查詢
5.1 頁面材料
輸入框1個，搜索按鈕一個，刷新按鈕一個
5.2 交互
一般查詢我們會用模糊查詢，例如我們搜索姓名，輸入張，就能把所有名字裡含有張的人查詢出來，這裡就是模糊搜索，用篩選事件完成。
如果需要對列表的第一列進行搜索，[[Item.Column1.indexOf(LVAR1)>-1]]，Item.Column1指的是列表的第一列，LVAR1代表輸入框的文字；如果對第二列進行搜索，則為[[Item.Column2.indexOf(LVAR1)>-1]]……以此類推
06 篩選
6.1 頁面材料
下拉列表，這裡可以用系統的下拉列表，如果覺得演示比較難看的也可以用自制的下拉列表。
6.2 交互
這裡要分兩種情況，如果選擇全部，我們要移除該篩選
如果選擇的不是全部，我們要添加篩選事件，[[Item.ColumnX==this.text]]。例如篩選第一行的時候，即[[Item.Column1==this.text]]，篩選第二行時，即[[Item.Column2==this.text]]……以此類推
07 排序
7.1 頁面材料
一個向上的三角形，代表升序
一個向下的三角形，代表降序
7.2 交互
點擊升序三角形時，添加排序，屬性選擇表格對應列，例如Column1代表第一列，Column2代表第2列……以此類推，排序類型可以根據需求選擇number（數字），text（文本），（date）日期，順序選擇升序。
如果點擊降序三角形，除了順序選擇切換，其他和升序三角形一致。
08 分頁
8.1 頁面材料
矩形n個，裡面註明是多少條每頁，例如10條/頁，20條/頁，50條/頁，100條/頁……
8.2 交互
點擊分頁矩形時，設置中繼器每頁項目數為矩形顯示的數目即可。
09 翻頁
9.1 頁面材料
下一頁和上一頁的按鈕，輸入框和確認按鈕
9.2 交互
鼠標點擊下一頁按鈕時，設置中繼器頁面為next
鼠標點擊上一頁按鈕時，設置中繼器頁面為previous
鼠標點擊確認按鈕時，設置中繼器頁面為value，輸入具體頁碼為[[LVAR1]]，即輸入的頁面數
10 導入和導出
10.1 導入
這裡只是模擬導入的效果，選擇一個文本框，類型選擇文件即可。
10.2 導出
這裡也是做一個模擬效果，事前需要將文件上傳，然後鼠標單擊導出按鈕時，打開已上傳文件的url地址即可。
以上就是本期分享的全部內容，點下關注不迷路哦，謝謝觀看。
本文由 @做產品但不是經理 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。
轉載請超鏈接註明：頭條資訊 » Axure中級教程：管理後臺內容模板（中繼器全交互詳解）
免責聲明
：非本網註明原創的信息，皆為程序自動獲取互聯網，目的在於傳遞更多信息，並不代表本網贊同其觀點和對其真實性負責；如此頁面有侵犯到您的權益，請給站長發送郵件，並提供相關證明(版權證明、身份證正反面、侵權鏈接)，站長將在收到郵件24小時內刪除。