中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

文章分享了關于利用Axure，動態的實現表單的增刪改的具體操作過程，一起來學習下。

1.搭好樣式的架子

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

2.初識中繼器

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

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

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

3.實現查看的功能

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

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

4.實現動態增加的功能

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

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

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

在中繼器三列數據依次添加好相應的函數值之后，點擊完成。中繼器動態的實現增添功能就實現了。

5.實現動態刪除的功能

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

中繼器動態的實現刪除功能就實現了。

6.實現動態修改的功能

最后，我們實現中繼器的動態修改功能，基本的思路就是，點擊修改按鈕之后，可以在中繼器的表單項中修改，然后點擊保存，把中繼器文本框中的值寫到中繼器屬性的數據里面，中繼器再根據更新了的數據展示出新的內容。首先要實現的是中繼器樣式中，修改按鈕的樣式變化，點擊修改按鈕，按鈕的字段變為“保存”，當修改好中繼器樣式的文本內容之后，點擊保存按鈕，按鈕的字段再變為“修改”。

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

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

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

完成之后點擊保存，中繼器動態的實現修改功能就實現了。

7.總結

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

資源共享

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

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

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

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

題圖來自PEXELS，基于CC0協議