編輯導語：利用中繼器進行增刪改查是我們常見的操作。在上篇文章里，作者介紹了如何利用中繼器進行查詢操作，本文作者針對初學者、分享了如何利用中繼器進行增刪改查操作，相信這對于初學者的你會有所幫助。

上期已經介紹了最簡單的利用中繼器進行查詢操作，收到的反饋效果較為理想，這次出接下來的增刪改操作。0基礎直接上手，小白建議先看上期，上期說到準備的元件還有動態面板在這期需要用到。

直接上教程。

一、添加操作

先放一個添加按鈕，再制作一個添加彈窗。

添加彈窗很簡單，拖一個灰色矩形覆蓋掉原頁面內容，再改變透明度；作為背景，拖一個動態面板作為中間彈窗即可，將兩個元件組合即可，效果如下。

雙擊動態面板，進入動態面板第一個狀態，為了好看，建議放一個白色矩形作為底色。

之后添加需要增加的信息，序號列已使用index函數，所以序號列不用增加。

添加姓名、電話、地址文本框（需要輸入信息）。為三個文本框命名，方便添加交互時比較好找，此處就以姓名、電話、地址來命名，如下。

關鍵點來了，為取消和確定按鈕添加交互，點擊取消直接隱藏該彈窗即可。彈窗之前已經分組，所以直接在單擊時隱藏該彈窗即可。

點擊確定按鈕，操作如下：

單擊時→添加行→選擇目標中繼器→點擊添加行→彈窗點擊函數→添加局部變量→插入變量→點擊保存。依次為姓名、電話、地址框添加。

點擊保存之后根據個人對保真的要求程度設置以下操作。

接下來為了效果，先隱藏掉彈窗按鈕，點擊添加，顯示彈窗。輸入信息點擊確定，添加成功。預覽看效果。

效果圖：設置成功。

二、刪除操作

刪除操作較為簡單。在中繼器的操作框添加刪除和編輯的按鈕，具體操作，雙擊中繼器，在操作框添加即可。

制作刪除彈窗，在添加操作的動態面板增加一個狀態。

制作刪除的二次確認彈窗。同上，需要姓名、電話、地址三個信息的獲取。具體操作如下。

彈窗制作好之后為刪除按鈕添加交互，進入中繼器，選中刪除按鈕，單擊時→顯示彈窗→設置動態面板的狀態切換到刪除狀態→取消標記中繼器中全部的行→標記中繼器當前行→設置文本。

此時數據已傳輸，進入動態面板刪除狀態，點擊確定→新建交互→單擊時→刪除行→選擇中繼器→已標記→確定。刪除操作成功。

效果圖：點擊刪除按鈕。

確定刪除數據，點擊確定。

刪除行成功。

三、編輯操作

編輯操作彈窗同刪除操作彈窗，直接復制刪除彈窗中的內容，注意確定按鈕上的交互需要清除。

編輯的按鈕設置同刪除按鈕的操作相同，注意需要改變面板的狀態到編輯狀態，設置文本的元件更換到編輯狀態中的。

接下來設置編輯狀態面板中的確定按鈕。

點擊時→更新行→目標選擇中繼器→已標記→依次選擇值設置全局變量→插入變量。設置完成。

預覽：點擊編輯。

更改文字內容，點擊確定。

編輯成功。

本期教程主要針對0基礎學習交互的朋友，這一期到此結束，歡迎大家指點交流。大家有想學的可以留言~

作者：小楊pm，微信公眾號：老楊說產品

本文由@小楊pm 原創發布于人人都是產品經理，未經許可，禁止轉載。

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