最近一周探索了Axure中中繼器的用法，在看別人的教程的過程中我產生了很多的困惑，于是理了一些思路出來，制作出了對列表的增加行(行里有數據)和刪除行，進行對行的修改和保存。希望對學習中繼器的朋友有用。

中繼器的用法總結如下：

一、給表格添加一行數據

1.1 準備工作

從元件庫分別拖入輸入框(文本框、下拉列表框)、按鈕、表格。設計出頁面的三個區域：輸入區、動作區、顯示區。對每個元件命好名。

★思路： 從輸入區輸入信息，經過動作區的點擊動作后把信息呈現在顯示區。

1.2 設置中繼器

拖入中繼器

選擇中繼器，①將中繼器拖到與表格標題左對齊；②在中繼器的屬性欄把默認的三行刪除。

③在中繼器屬性欄中輸入表格的標題名稱(用英文，軟件不識別中文)。

在設計稿中雙擊中繼器，切換到對中繼器的內部編輯。

設置中繼器寬度與表格寬度一致。高度可以高一點或矮一點都可以。

從元件區拖入6個文本框，每個文本框的寬度與所在列的寬度一致。對應的命好名。

1.3 給“添加”按鈕配置動作

★思路 ?：當點擊“添加”按鈕時，中繼器增加一行。

選擇“添加”按鈕-在屬性欄下找點擊“鼠標單擊時”-在彈出的彈窗里(中繼器-數據集-添加行)-點擊“添加行”后-在第三欄里找到并勾選要添加行的中繼器-點擊下方的“添加行”按鈕-彈出一個“添加行到中繼器”的彈框。

在“添加行到中繼器”的彈框中，從“xingming”欄起，到“youxiang”欄，分別點擊“fx”,在彈出的“編輯器”中，在第一個輸入框里命個名比如：[[xming]]，在第二個輸入框中也輸入相同的名稱，只是去掉雙中括號。然后選擇“元件文字”(如果后面的數據是下拉選擇的，則在這里要選擇“被選項”)，在最后一個輸入框中選擇輸入區的某個文本框(數據的輸入位置)。

？思考?：按理來說，配置到這一步的時候就可以完成增加行的動作了，因為我們在這里已經配置了數據的來源地和數據的顯示位置。但是用瀏覽器測試結果為：行可以增加，但是數據為空，見下圖：

進一步分析以上的配置是把輸入區的數據經過點擊“添加”按鈕后顯示在表格顯示區，但是之前還做了一個步驟就是：在中繼器中拖入了6個文本框，而以上的配置并沒有涉及到這六個文本框，那么顯示的數據會不會被這六個文本框遮住了呢？

那么在axure中把這六個文本框刪除掉后是不是就可以把數據顯示出來了呢？

刪除了這六個文本框后，在瀏覽器中測試結果如下(依然無法顯示數據)：

為什么會出現這樣的結果？這應該是Axure軟件的一個設計缺陷，也就是說中繼器不具有顯示能力。顯示數據要通過中繼器中的文本框來顯示。

領悟?：到此，明白了那六個文本框是用來給表格分欄并顯示中繼器從輸入區獲取的數據。

1.4 給中繼器配置顯示能力

★思路：??當點擊“添加”按鈕時，中繼器增加一行的同時將輸入區的數據顯示在新增的行中。

第1.3步中，已經把輸入區的數據獲取到了中繼器中，但是無法顯示出來。在這一步中將通過一些方法將數據顯示到中繼器中的六個文本框中。

選擇中繼器-選擇每項加載時-選擇設置文本-分別選擇中繼器中的文本框-點擊fx-選擇對應的中繼器標題名稱。

值得注意的是：為了實現編號一欄實現自增長，在編輯文本彈框里，編號一欄選擇index。局部變量可以不用設置。操作欄先別設置。

可以看到，當設置完后，原來在中繼器屬性中輸入的數據已經獲取到了中繼器中。

測試成功：在瀏覽器中測試結果如下：

二、給表格刪除一行

★思路：??勾選某行后點擊刪除按鈕，此行被刪除。

2.1 新增復選框

為了達到這個目的，首先在中繼器中加入復選框，并在中繼器屬性標題欄中新增一欄“xuanze”用來放置復選框。

2.2設置復選框與所在行的對應關系

★思路：??勾選復選框時標記復選框所在的行。

選擇復選框-雙擊選中時-在彈出的用例編輯器中選擇(中繼器-數據集-標記行)-選擇對應的中繼器-選擇：This。

2.3 設置刪除按鈕的點擊動作

★思路：??點擊“刪除”按鈕時，將被標記的行刪除掉。

選擇刪除按鈕-選擇鼠標單擊時-在彈出的用例編輯器中選擇(刪除行-選擇對應的中繼器-勾選已標記)。

測試成功：在瀏覽器中測試結果如下：

三、修改行

★思路：??通過一個“修改”按鈕讓此行處于可編輯狀態，編輯完后通過一個“保存”按鈕將此行信息保存。

3.1 準備工作

首先讓文本框處于禁用狀態。在中繼器中新增一個“修改”按鈕和一個“保存”按鈕，讓“保存”按鈕先

處于隱藏狀態。

????

3.2為“修改”按鈕配置動作

★思路：??點擊“修改”按鈕時，本行處于可編輯狀態，同時“保存”按鈕出現，隱藏“修改”按鈕。

選擇修改按鈕-雙擊鼠標單擊時-在彈出的用例編輯器中(選擇元件-顯示/隱藏-顯示保存按鈕/隱藏修改按鈕)(選擇元件-啟用/禁用-啟用相應的文本框)

測試成功：在瀏覽器中測試結果如下：

3.3為“保存”按鈕配置動作

★思路：??點擊“保存”按鈕后，保存當前行的數據。

選擇保存按鈕-選擇鼠標單擊時-在彈出的用例編輯器中(選擇中繼器-數據集-更新行-選擇相應的中繼器-選擇This-選擇中繼器中相應的列-點擊相應列后的fx-在彈出的編輯值彈框中設置值得來源地(比如xingming的來源地在這里設置為從中繼器的xm文本框中獲取))

測試成功：在瀏覽器中測試結果如下：

至此，在中繼器中對表格的增、刪、改完成，不足之處望大家指正，歡迎討論，需要源文件的可以私信我索要。

感謝閱讀！

總結

以上是生活随笔為你收集整理的axure 调整中继器列宽_在Axure中用“中继器”实现对表格的增、删、改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。