最近一周探索了Axure中中繼器的用法，在看別人的教程的過(guò)程中我產(chǎn)生了很多的困惑，于是理了一些思路出來(lái)，制作出了對(duì)列表的增加行(行里有數(shù)據(jù))和刪除行，進(jìn)行對(duì)行的修改和保存。希望對(duì)學(xué)習(xí)中繼器的朋友有用。

中繼器的用法總結(jié)如下：

一、給表格添加一行數(shù)據(jù)

1.1 準(zhǔn)備工作

從元件庫(kù)分別拖入輸入框(文本框、下拉列表框)、按鈕、表格。設(shè)計(jì)出頁(yè)面的三個(gè)區(qū)域：輸入?yún)^(qū)、動(dòng)作區(qū)、顯示區(qū)。對(duì)每個(gè)元件命好名。

★思路： 從輸入?yún)^(qū)輸入信息，經(jīng)過(guò)動(dòng)作區(qū)的點(diǎn)擊動(dòng)作后把信息呈現(xiàn)在顯示區(qū)。

1.2 設(shè)置中繼器

拖入中繼器

選擇中繼器，①將中繼器拖到與表格標(biāo)題左對(duì)齊；②在中繼器的屬性欄把默認(rèn)的三行刪除。

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

在設(shè)計(jì)稿中雙擊中繼器，切換到對(duì)中繼器的內(nèi)部編輯。

設(shè)置中繼器寬度與表格寬度一致。高度可以高一點(diǎn)或矮一點(diǎn)都可以。

從元件區(qū)拖入6個(gè)文本框，每個(gè)文本框的寬度與所在列的寬度一致。對(duì)應(yīng)的命好名。

1.3 給“添加”按鈕配置動(dòng)作

★思路 ?：當(dāng)點(diǎn)擊“添加”按鈕時(shí)，中繼器增加一行。

選擇“添加”按鈕-在屬性欄下找點(diǎn)擊“鼠標(biāo)單擊時(shí)”-在彈出的彈窗里(中繼器-數(shù)據(jù)集-添加行)-點(diǎn)擊“添加行”后-在第三欄里找到并勾選要添加行的中繼器-點(diǎn)擊下方的“添加行”按鈕-彈出一個(gè)“添加行到中繼器”的彈框。

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

？思考?：按理來(lái)說(shuō)，配置到這一步的時(shí)候就可以完成增加行的動(dòng)作了，因?yàn)槲覀冊(cè)谶@里已經(jīng)配置了數(shù)據(jù)的來(lái)源地和數(shù)據(jù)的顯示位置。但是用瀏覽器測(cè)試結(jié)果為：行可以增加，但是數(shù)據(jù)為空，見(jiàn)下圖：

進(jìn)一步分析以上的配置是把輸入?yún)^(qū)的數(shù)據(jù)經(jīng)過(guò)點(diǎn)擊“添加”按鈕后顯示在表格顯示區(qū)，但是之前還做了一個(gè)步驟就是：在中繼器中拖入了6個(gè)文本框，而以上的配置并沒(méi)有涉及到這六個(gè)文本框，那么顯示的數(shù)據(jù)會(huì)不會(huì)被這六個(gè)文本框遮住了呢？

那么在axure中把這六個(gè)文本框刪除掉后是不是就可以把數(shù)據(jù)顯示出來(lái)了呢？

刪除了這六個(gè)文本框后，在瀏覽器中測(cè)試結(jié)果如下(依然無(wú)法顯示數(shù)據(jù))：

為什么會(huì)出現(xiàn)這樣的結(jié)果？這應(yīng)該是Axure軟件的一個(gè)設(shè)計(jì)缺陷，也就是說(shuō)中繼器不具有顯示能力。顯示數(shù)據(jù)要通過(guò)中繼器中的文本框來(lái)顯示。

領(lǐng)悟?：到此，明白了那六個(gè)文本框是用來(lái)給表格分欄并顯示中繼器從輸入?yún)^(qū)獲取的數(shù)據(jù)。

1.4 給中繼器配置顯示能力

★思路：??當(dāng)點(diǎn)擊“添加”按鈕時(shí)，中繼器增加一行的同時(shí)將輸入?yún)^(qū)的數(shù)據(jù)顯示在新增的行中。

第1.3步中，已經(jīng)把輸入?yún)^(qū)的數(shù)據(jù)獲取到了中繼器中，但是無(wú)法顯示出來(lái)。在這一步中將通過(guò)一些方法將數(shù)據(jù)顯示到中繼器中的六個(gè)文本框中。

選擇中繼器-選擇每項(xiàng)加載時(shí)-選擇設(shè)置文本-分別選擇中繼器中的文本框-點(diǎn)擊fx-選擇對(duì)應(yīng)的中繼器標(biāo)題名稱。

值得注意的是：為了實(shí)現(xiàn)編號(hào)一欄實(shí)現(xiàn)自增長(zhǎng)，在編輯文本彈框里，編號(hào)一欄選擇index。局部變量可以不用設(shè)置。操作欄先別設(shè)置。

可以看到，當(dāng)設(shè)置完后，原來(lái)在中繼器屬性中輸入的數(shù)據(jù)已經(jīng)獲取到了中繼器中。

測(cè)試成功：在瀏覽器中測(cè)試結(jié)果如下：

二、給表格刪除一行

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

2.1 新增復(fù)選框

為了達(dá)到這個(gè)目的，首先在中繼器中加入復(fù)選框，并在中繼器屬性標(biāo)題欄中新增一欄“xuanze”用來(lái)放置復(fù)選框。

2.2設(shè)置復(fù)選框與所在行的對(duì)應(yīng)關(guān)系

★思路：??勾選復(fù)選框時(shí)標(biāo)記復(fù)選框所在的行。

選擇復(fù)選框-雙擊選中時(shí)-在彈出的用例編輯器中選擇(中繼器-數(shù)據(jù)集-標(biāo)記行)-選擇對(duì)應(yīng)的中繼器-選擇：This。

2.3 設(shè)置刪除按鈕的點(diǎn)擊動(dòng)作

★思路：??點(diǎn)擊“刪除”按鈕時(shí)，將被標(biāo)記的行刪除掉。

選擇刪除按鈕-選擇鼠標(biāo)單擊時(shí)-在彈出的用例編輯器中選擇(刪除行-選擇對(duì)應(yīng)的中繼器-勾選已標(biāo)記)。

測(cè)試成功：在瀏覽器中測(cè)試結(jié)果如下：

三、修改行

★思路：??通過(guò)一個(gè)“修改”按鈕讓此行處于可編輯狀態(tài)，編輯完后通過(guò)一個(gè)“保存”按鈕將此行信息保存。

3.1 準(zhǔn)備工作

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

處于隱藏狀態(tài)。

????

3.2為“修改”按鈕配置動(dòng)作

★思路：??點(diǎn)擊“修改”按鈕時(shí)，本行處于可編輯狀態(tài)，同時(shí)“保存”按鈕出現(xiàn)，隱藏“修改”按鈕。

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

測(cè)試成功：在瀏覽器中測(cè)試結(jié)果如下：

3.3為“保存”按鈕配置動(dòng)作

★思路：??點(diǎn)擊“保存”按鈕后，保存當(dāng)前行的數(shù)據(jù)。

選擇保存按鈕-選擇鼠標(biāo)單擊時(shí)-在彈出的用例編輯器中(選擇中繼器-數(shù)據(jù)集-更新行-選擇相應(yīng)的中繼器-選擇This-選擇中繼器中相應(yīng)的列-點(diǎn)擊相應(yīng)列后的fx-在彈出的編輯值彈框中設(shè)置值得來(lái)源地(比如xingming的來(lái)源地在這里設(shè)置為從中繼器的xm文本框中獲取))

測(cè)試成功：在瀏覽器中測(cè)試結(jié)果如下：

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

感謝閱讀！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。