Axure教程：如何用中繼器實現刪除、編輯數據及排序、分頁

在上文《中繼器實現列表添加數據案例》中，我們利用中繼器實現了列表數據的新增，這一篇，我們會在上篇的基礎上講解刪除列表一行數據、編輯數據、排序、分頁的應用。

預覽：https://jipr1h.axshare.com

一、刪除1. 準備元件

動態面板（這個在添加的基礎上進行復制修改）、刪除的按鈕、其餘元件大家參考上篇，這邊不作多餘贅述；

在【添加的動態面板】上進行復製為state2，然後修改為【刪除的動態面板】；如下

將添加的文本框分別命名（方便後文與中繼器綁定）

2. 為【刪除】按鈕添加交互

（1）選中表格中的【刪除】，添加【鼠標單擊時】的交互用例，添加動作【顯示】動態面板，選擇【燈箱效果】；

（2）接下來添加動作【設置面板狀態】，選中動態面板，設置面板狀態為state2（即刪除的面板）

（3）接下來添加動作【取消標記】，選中中繼器，選擇全部

（4）添加動作【標記行】，設置標記當前選中的行，

（5）設置動態面板中的文本框的文本，分別與中繼器列對應，如設置【值】為[[Item.xingming]]如下圖

二、排序1. 準備元件

排序的下拉列表（輸入按時間排序和按姓名排序）、表格（沿用上文的元件）

2. 添加交互

（1）選中下拉列表，添加【選項改變時】的交互用例，找到中繼器選擇【添加排序】，設置為按照【姓名】排序，如下圖：

（2）選中下拉列表，設置【載入時】的交互用例，添加動作【設置列表選中項】為“按時間排序”

然後為這一動作添加條件，即被選項是按姓名排序

然後添加【選項改變時】的用例2，添加動作【添加排序】，設置為按照時間排序，排序方式是日期，條件不用編輯，如下圖

（3）設置完點擊確定，進行預覽，如下圖

三、分頁1. 準備元件

分頁元件，表格，如下圖

2. 設置交互

選中分頁向左按鈕（或添加熱區覆蓋在上面），添加【鼠標單擊時】的交互用例，為中繼器添加動作【設置當前顯示頁面】，選擇前一頁，如下圖

按照同樣的方法，為向右按鈕添加交互；

選中頁碼1，添加【鼠標單擊時】的交互用例，設置當前顯示頁面為2；

我們可以在樣式中設置中繼器每頁顯示的項目數

按照同樣的方法，為其他頁碼添加交互；完成後預覽；

整體預覽地址如下：https://jipr1h.axshare.com

四、編輯修改數據

交互：點擊編輯按鈕，顯示編輯彈框，為燈箱效果，彈框中顯示已選中的數據，且可在文本框中編輯文字，編輯完後點擊確定，隱藏編輯彈框，並且列表中數據進行更新。

預覽：https://jipr1h.axshare.com

1. 準備元件

編輯彈框（可複製添加彈框）、編輯按鈕、表格

2. 設置交互

（1）選中編輯按鈕，添加【鼠標單擊時】的交互案例，設置顯示動態面板，燈箱效果，同時設置面板狀態為編輯彈框。

（2）設置【取消標記】中繼器的全部，同時【標記行】選中中繼器的This，

（3）設置文本，分別將動態面板中編輯彈框的文本框與中繼器的列進行綁定；

（4）選中編輯彈框中的【確定】按鈕，設置【鼠標單擊時】的用例，設置隱藏動態面板，同時設置中繼器【更新行】，選中【已標記】的行，並設置中繼器的列。

（5）點擊確定，進行預覽：https://jipr1h.axshare.com

本文由 @啦啦啦 原創發佈於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議。