編輯導(dǎo)語(yǔ)：利用中繼器進(jìn)行增刪改查是我們常見(jiàn)的操作。在上篇文章里，作者介紹了如何利用中繼器進(jìn)行查詢操作，本文作者針對(duì)初學(xué)者、分享了如何利用中繼器進(jìn)行增刪改查操作，相信這對(duì)于初學(xué)者的你會(huì)有所幫助。

上期已經(jīng)介紹了最簡(jiǎn)單的利用中繼器進(jìn)行查詢操作，收到的反饋效果較為理想，這次出接下來(lái)的增刪改操作。0基礎(chǔ)直接上手，小白建議先看上期，上期說(shuō)到準(zhǔn)備的元件還有動(dòng)態(tài)面板在這期需要用到。

直接上教程。

一、添加操作

先放一個(gè)添加按鈕，再制作一個(gè)添加彈窗。

添加彈窗很簡(jiǎn)單，拖一個(gè)灰色矩形覆蓋掉原頁(yè)面內(nèi)容，再改變透明度；作為背景，拖一個(gè)動(dòng)態(tài)面板作為中間彈窗即可，將兩個(gè)元件組合即可，效果如下。

雙擊動(dòng)態(tài)面板，進(jìn)入動(dòng)態(tài)面板第一個(gè)狀態(tài)，為了好看，建議放一個(gè)白色矩形作為底色。

之后添加需要增加的信息，序號(hào)列已使用index函數(shù)，所以序號(hào)列不用增加。

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

關(guān)鍵點(diǎn)來(lái)了，為取消和確定按鈕添加交互，點(diǎn)擊取消直接隱藏該彈窗即可。彈窗之前已經(jīng)分組，所以直接在單擊時(shí)隱藏該彈窗即可。

點(diǎn)擊確定按鈕，操作如下：

單擊時(shí)→添加行→選擇目標(biāo)中繼器→點(diǎn)擊添加行→彈窗點(diǎn)擊函數(shù)→添加局部變量→插入變量→點(diǎn)擊保存。依次為姓名、電話、地址框添加。

點(diǎn)擊保存之后根據(jù)個(gè)人對(duì)保真的要求程度設(shè)置以下操作。

接下來(lái)為了效果，先隱藏掉彈窗按鈕，點(diǎn)擊添加，顯示彈窗。輸入信息點(diǎn)擊確定，添加成功。預(yù)覽看效果。

效果圖：設(shè)置成功。

二、刪除操作

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

制作刪除彈窗，在添加操作的動(dòng)態(tài)面板增加一個(gè)狀態(tài)。

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

彈窗制作好之后為刪除按鈕添加交互，進(jìn)入中繼器，選中刪除按鈕，單擊時(shí)→顯示彈窗→設(shè)置動(dòng)態(tài)面板的狀態(tài)切換到刪除狀態(tài)→取消標(biāo)記中繼器中全部的行→標(biāo)記中繼器當(dāng)前行→設(shè)置文本。

此時(shí)數(shù)據(jù)已傳輸，進(jìn)入動(dòng)態(tài)面板刪除狀態(tài)，點(diǎn)擊確定→新建交互→單擊時(shí)→刪除行→選擇中繼器→已標(biāo)記→確定。刪除操作成功。

效果圖：點(diǎn)擊刪除按鈕。

確定刪除數(shù)據(jù)，點(diǎn)擊確定。

刪除行成功。

三、編輯操作

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

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

接下來(lái)設(shè)置編輯狀態(tài)面板中的確定按鈕。

點(diǎn)擊時(shí)→更新行→目標(biāo)選擇中繼器→已標(biāo)記→依次選擇值設(shè)置全局變量→插入變量。設(shè)置完成。

預(yù)覽：點(diǎn)擊編輯。

更改文字內(nèi)容，點(diǎn)擊確定。

編輯成功。

本期教程主要針對(duì)0基礎(chǔ)學(xué)習(xí)交互的朋友，這一期到此結(jié)束，歡迎大家指點(diǎn)交流。大家有想學(xué)的可以留言~

作者：小楊pm，微信公眾號(hào)：老楊說(shuō)產(chǎn)品

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

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