文章分享了關(guān)于利用Axure，動態(tài)的實現(xiàn)表單的增刪改的具體操作過程，一起來學(xué)習(xí)下。

1.搭好樣式的架子

我們初步打算實現(xiàn)的是，在Axure中動態(tài)的實現(xiàn)表單的增刪改。第一步要做的就是在Axure中搭一個表單出來，這里，我們對一個人的基本信息（姓名、性別、年齡）創(chuàng)建一個表單。每一個字段的輸入框選用的是文本框，文本框的命名按照自己的習(xí)慣進(jìn)行，方便之后的修改，對于姓名、性別、年齡三個字段，我的命名分別為name、sex、age。

2.初識中繼器

然后我們添加一個中繼器，中繼器的最初樣式，由雙擊中繼器之后的中繼器樣式+中繼器數(shù)據(jù)決定的，中繼器數(shù)據(jù)初始化有三條數(shù)據(jù)，每條數(shù)據(jù)只有column0一項數(shù)據(jù)，如下圖所示。

雙擊中繼器，可以對中繼器的樣式進(jìn)行修改，依照最之前我們搭的架子，每一個字段的輸入框選用的是文本框，文本框的命名按照自己的習(xí)慣進(jìn)行，姓名、性別、年齡命名依舊分別為name、sex、age。

選中中繼器，在屬性一欄可以對中繼器數(shù)據(jù)進(jìn)行修改，默認(rèn)的數(shù)據(jù)有三條，每條只有一項，我們可以針對于自己的表單，進(jìn)行如下圖左的修改。同樣的，在中繼器樣式一欄中，可以對中繼器的顯示方式進(jìn)行修改，我們默認(rèn)中繼器的顯示為橫向，每行最多有兩個，如下圖右所示。

3.實現(xiàn)查看的功能

這時候中繼器容器，會顯示出三個表單項，但是每個表單項里面并沒有我們之前在中繼器屬性里面輸入的數(shù)據(jù)，我們要設(shè)置中繼器里面文本框的文本內(nèi)容，讓三個表單項里面加載出來之前輸入的數(shù)據(jù)。這里說一下簡要的想法，就是把中繼器屬性里面的數(shù)據(jù)加載到中繼器樣式里面對應(yīng)的文本框中。具體的做法是，在中繼器每項加載時，設(shè)置交互，針對中繼器樣式里面的文本框設(shè)置文本，按照下圖所示操作。

當(dāng)勾選完上圖第三步之后，可以利用中繼器提供的變量值，設(shè)置函數(shù)值。格式是[[item.XXX]]，XXX表示中繼器屬性里面的column（列），姓名、性別、年齡依次填好之后，點擊完成，數(shù)據(jù)就顯示出來了。到此，中繼器實現(xiàn)表單的查看功能就實現(xiàn)了。

4.實現(xiàn)動態(tài)增加的功能

接下來，就要實現(xiàn)動態(tài)增加的功能。這里簡要的說一下增添表單的思路，就是把框架里面的文本框的內(nèi)容，賦值到中繼器屬性的數(shù)據(jù)里面，所以基本的邏輯是：手動的在三個文本框中輸入想要的文本內(nèi)容，點擊添加按鈕，在中繼器中自動的添加出來相應(yīng)的內(nèi)容。

我們對添加按鈕增加一個交互，當(dāng)鼠標(biāo)單擊的時候，選擇“中繼器-數(shù)據(jù)集-添加行”事件，勾選中繼器，點擊下方的添加行，具體的步驟如下圖所示。

在點擊“添加行”之后，會彈出來一個“添加行到中繼器”的對話框，這里面每一列就是中繼器數(shù)據(jù)中的列，針對于你想要添加的一條數(shù)據(jù)，每一列的值都要做相應(yīng)的賦值。單擊fx添加函數(shù)，會彈出一個“編輯值”的對話框。這里我們要用到局部變量這個概念，我們把某個元件的值或者狀態(tài)賦值到一個局部變量，再通過調(diào)用局部變量實現(xiàn)對于中繼器的賦值。這時，我們需要對文本框元件的文本值賦值成一個變量，然后在調(diào)用這個變量賦值到中繼器，具體的實現(xiàn)方法如下圖所示。

在中繼器三列數(shù)據(jù)依次添加好相應(yīng)的函數(shù)值之后，點擊完成。中繼器動態(tài)的實現(xiàn)增添功能就實現(xiàn)了。

5.實現(xiàn)動態(tài)刪除的功能

接下來，我們實現(xiàn)刪除的功能，這一步要比之前的都簡單的多。中繼器交互中提供里刪除行的交互。雙擊中繼器，打開中繼器樣式，在我們事先搭好的架子中找到刪除按鈕，單擊時添加交互。選中“中繼器-數(shù)據(jù)集-刪除行”事件，勾選中繼器，然后在具體的刪除條件中選擇this，表示刪除中繼器里面所勾選的這個表單項，選好之后點擊保存，如下圖所示。

中繼器動態(tài)的實現(xiàn)刪除功能就實現(xiàn)了。

6.實現(xiàn)動態(tài)修改的功能

最后，我們實現(xiàn)中繼器的動態(tài)修改功能，基本的思路就是，點擊修改按鈕之后，可以在中繼器的表單項中修改，然后點擊保存，把中繼器文本框中的值寫到中繼器屬性的數(shù)據(jù)里面，中繼器再根據(jù)更新了的數(shù)據(jù)展示出新的內(nèi)容。首先要實現(xiàn)的是中繼器樣式中，修改按鈕的樣式變化，點擊修改按鈕，按鈕的字段變?yōu)椤氨４妗?，?dāng)修改好中繼器樣式的文本內(nèi)容之后，點擊保存按鈕，按鈕的字段再變?yōu)椤靶薷摹薄?/p>

這個字段的切換，實現(xiàn)方式有很多種，我用的是動態(tài)面板這個模塊。把修改按鈕轉(zhuǎn)為動態(tài)面板，初始狀態(tài)為修改，增加一個狀態(tài)，字段修改為保存，單擊時增加交互，切換面板的狀態(tài)，如下圖所示。

按照剛才梳理的邏輯，點擊修改按鈕之后字段變?yōu)椤巴瓿伞?，在文本框中修改好文本?nèi)容，點擊完成按鈕，將文本內(nèi)容寫入中繼器數(shù)據(jù)中。接下來就是在動態(tài)面板的“完成”狀態(tài)里面，為完成按鈕增加單擊時的交互。單擊時發(fā)生交互，選擇“中繼器-數(shù)據(jù)集-更新行”事件，勾選中繼器，選擇this，最初列那一部分的數(shù)據(jù)是空的，需要從“選擇列”中依次的手動添加出來，如下圖所示。

依次添加好name、sex、age之后，每一個列的值，還是需要局部變量實現(xiàn)賦值，點擊fx，彈出“編輯值”對話框。局部變量中添加對應(yīng)的中繼器文本框的元件文字，賦值給一個變量，在調(diào)用這個變量，賦值到中繼器屬性數(shù)據(jù)中，具體的操作如下圖所示。

完成之后點擊保存，中繼器動態(tài)的實現(xiàn)修改功能就實現(xiàn)了。

7.總結(jié)

初步體驗了中繼器的基礎(chǔ)功能，發(fā)現(xiàn)中繼器的作用在于，在線的提供了一個數(shù)據(jù)庫，可以虛擬的在頁面上完成數(shù)據(jù)的增刪改查，及其他功能。使得Axure原型不再是簡簡單單的靜態(tài)頁面，加入了數(shù)據(jù)上的交互，使得Axure看上去變成了動態(tài)網(wǎng)頁，方便我們制作高保真原型，增加原型的交互性和可讀性。

資源共享

Axshare地址：http://n57hqa.axshare.com

百度云鏈接: https://pan.baidu.com/s/1kVxe0sR 密碼: rkf3

作者：Mitsuizq，微信公眾號：Mitsuizq

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

題圖來自PEXELS，基于CC0協(xié)議