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協議。