Axure高保真教程：中繼器版穿梭表格表格是我們系統(tǒng)中常用的組件，穿梭表格就是使用直觀方式在兩個(gè)表格中移動(dòng)數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)的流淌。今日就教大家如何在Axure里用中繼器制作出表格穿梭的效果。

一、效果展現(xiàn)

1、選中效果：鼠標(biāo)點(diǎn)擊表格中所在的行，可以選中該行數(shù)據(jù)；

2、穿梭效果：鼠標(biāo)點(diǎn)擊上或下箭頭，可以將選中的行數(shù)據(jù)傳遞的上方或下方的表格；

3、中繼器效果：使用時(shí)在中繼器表格中維護(hù)表格數(shù)據(jù)，即可自動(dòng)生成交互效果。

原型地址：/#g=1

二、制作教程

我們需要制作上方可選表格、下方已選表格，以及點(diǎn)擊上下箭頭傳遞數(shù)據(jù)的交互。

1.上方可選表格制作

上邊可選表格主要分為表頭、表格內(nèi)容和記錄文本組成。

1）表頭

表頭我們用矩形制作即可，如下圖所示擺放：

2）表格內(nèi)容

表格內(nèi)容，我們需要用中繼器來(lái)制作，在中繼器里添加矩形，每個(gè)矩形和表頭的寬度全都，顏色選擇透亮?????，這樣我們可以設(shè)置中繼器背景交替顏色，這樣就可以實(shí)現(xiàn)單雙行用不同的顏色間隔的效果。

中繼器里的矩形我們?cè)黾右粋€(gè)懸停的樣式，然后把他們組合在一起，勾選觸發(fā)內(nèi)部元件鼠標(biāo)交互樣式，這樣就可以實(shí)現(xiàn)移入變色的效果。

我們?cè)诮M合底部添加一個(gè)透亮?????矩形，矩形包裹著全部小矩形，我們可以把他當(dāng)做背景矩形，我們?cè)黾右粋€(gè)選中時(shí)的交互樣式，案例中是藍(lán)色。我們想做點(diǎn)擊選中的效果，由于這次是做單選的，全部我們要設(shè)置成單選組。

在鼠標(biāo)點(diǎn)擊組合時(shí)，我們用設(shè)置選中的交互，將背景矩形設(shè)置為真。

中繼器表格里增加對(duì)應(yīng)的列，表格有幾列就增加幾列，填寫上對(duì)應(yīng)的數(shù)據(jù)，如下圖所示：

在中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，將中繼器表格里每列的內(nèi)容，對(duì)應(yīng)的設(shè)置到中繼器內(nèi)部的矩形里。

假如想傳遞的時(shí)候，表格挨次不變的話，我們還可以在中繼器載入時(shí)，增加一個(gè)排序的交互，根據(jù)指定的列來(lái)進(jìn)行排序，案例中是根據(jù)第一列來(lái)排序。

3）記錄文本

記錄文本只用于記錄選中的行的信息，不用于顯示，所以表格中有幾列我們就用幾個(gè)記錄文本，默認(rèn)隱蔽。在鼠標(biāo)單擊選中某一行的組合時(shí)，我們用設(shè)置文本的交互，將中繼器表格里對(duì)應(yīng)的數(shù)據(jù)，設(shè)置到記錄文本中

2.下方已選表格制作

下方已選表格和上方可選表格其實(shí)是一樣的，我們可以把上面的元件組合，然后復(fù)制一個(gè)表格，就是下方已選表格。一般來(lái)說(shuō)，下方已選表格中的內(nèi)容都是空的，所以我們把中繼器表格里的數(shù)據(jù)都刪除就默認(rèn)為空值了。

這樣就可以快速做出下方已選表格的操作了。這里需要留意的是，假如下方表格數(shù)據(jù)選中了，那上方記錄文字就應(yīng)當(dāng)設(shè)置為空，假如上方表格數(shù)據(jù)選中時(shí)，下方記錄文字就應(yīng)當(dāng)為空，所以我們要在上下中繼器里的組合鼠標(biāo)單擊時(shí)，設(shè)置文本里添加上設(shè)置另外一個(gè)表格記錄文字為空值。

3.上下箭頭傳遞數(shù)據(jù)的交互

我們需要預(yù)備兩個(gè)箭頭的圖標(biāo)，一個(gè)向上，一個(gè)向下，另外還需要兩個(gè)矩形，里面填寫提示文字，默認(rèn)隱蔽，用于未選中表格數(shù)據(jù)就點(diǎn)擊上下箭頭的提示

1）鼠標(biāo)單擊下箭頭時(shí)

即從上邊表格的數(shù)據(jù)傳遞到下方表格，這時(shí)我們需要先推斷，上方邊個(gè)是否有被選中，這里我們看看記錄文本的文字是否為空就知道有沒(méi)有被選中。

假如記錄文本不為空，那就有選中的內(nèi)容，我們先用添加行的交互，在下方中繼器里添加一行，詳細(xì)內(nèi)容就是各列的記錄文本里對(duì)應(yīng)的文字，然后我們?cè)儆脛h除行的交互，刪除當(dāng)前中繼器的這一行數(shù)據(jù)。

假如記錄文本為空，那就是未選中，這里我們用顯示的交互，顯示對(duì)應(yīng)的提示矩形即可。

這里需要留意兩個(gè)點(diǎn)：

第一，假如傳遞數(shù)據(jù)的時(shí)候，數(shù)據(jù)傳遞過(guò)去之后就會(huì)流出空白的位置，傳遞的數(shù)據(jù)越多，空白位置就越大，那我們可以怎么處理呢？這里供應(yīng)兩種思路，第一種是把上面表格里全部元件組合，傳遞數(shù)據(jù)完成后用移動(dòng)的交互，把下方全部元件的組合移動(dòng)到該中繼器下方指定的位置；

其次種方法是利用動(dòng)態(tài)面板在設(shè)置面板狀態(tài)的交互，可以推動(dòng)拉起下方元件，我們把中繼器表格放在動(dòng)態(tài)面板里，再新建一個(gè)空白的面板狀態(tài)，傳遞數(shù)據(jù)的時(shí)候，通過(guò)設(shè)置面板狀態(tài)，先設(shè)置到空白面板，這樣可以拉起下方元件，再設(shè)置回中繼器表格的狀態(tài)，這樣又會(huì)推動(dòng)下方元件，這樣就實(shí)現(xiàn)了自動(dòng)推下下方元件的效果。

其次，傳遞數(shù)據(jù)之后，記錄文本里還是有文字的，所以我們要用設(shè)置文本的交互，把全部記錄文字的值設(shè)置為空值，這樣相當(dāng)于恢復(fù)默認(rèn)狀態(tài)。

2）鼠標(biāo)單擊上箭頭時(shí)

就是要把下方表格的數(shù)據(jù)傳遞到上方的表格，這個(gè)其實(shí)和點(diǎn)擊下箭頭的思路和交互都是一樣的，只不過(guò)便利變了。

同樣我們要先通過(guò)記錄文本推斷下方表格是否有數(shù)據(jù)被選中，假如有被選中，就用增加行在上方中繼器里增加選中的數(shù)據(jù)，再用刪除行刪除當(dāng)前中繼器表格當(dāng)前選中的數(shù)據(jù)。假如沒(méi)有被選中，就顯示對(duì)應(yīng)的提示文字即可。

這里傳遞完數(shù)據(jù)之后同樣是要做恢復(fù)的交互，就是設(shè)置全部記錄文字的文本為空值。

由于下方表格的數(shù)據(jù)傳遞到上面的表格，所以上面的表格就會(huì)變大，可能會(huì)可以下方元件重合，那解決的方法和思路也是和上面一樣的，用移動(dòng)的交互，或者動(dòng)態(tài)面板推拉的效果都可以處理，這里和上面的都是全都