表格是我們系統(tǒng)中常用的組件，穿梭表格就是使用直觀方式在兩個表格中移動數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)的流動。本文作者分享了如何在Axure里用中繼器制作出表格穿梭的效果，一起來看一下吧。

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

一、效果展示

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

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

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

二、制作教程

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

1. 上方可選表格制作

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

1）表頭

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

2）表格內(nèi)容

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

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

我們在組合底部添加一個透明矩形，矩形包裹著所有小矩形，我們可以把他當(dāng)做背景矩形，我們增加一個選中時的交互樣式，案例中是藍(lán)色。我們想做點(diǎn)擊選中的效果，因?yàn)檫@次是做單選的，所有我們要設(shè)置成單選組。

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

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

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

如果想傳遞的時候，表格順序不變的話，我們還可以在中繼器載入時，增加一個排序的交互，按照指定的列來進(jìn)行排序，案例中是按照第一列來排序。

3）記錄文本

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

2. 下方已選表格制作

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

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

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

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

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

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

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

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

這里需要注意兩個點(diǎn)：

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

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

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

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

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

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

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

因?yàn)橄路奖砀竦臄?shù)據(jù)傳遞到上面的表格，所以上面的表格就會變大，可能會可以下方元件重合，那解決的方法和思路也是和上面一樣的，用移動的交互，或者動態(tài)面板推拉的效果都可以處理，這里和上面的都是一致的。

這樣我們就完成了能傳遞數(shù)據(jù)的穿梭表格原型模板了，后續(xù)使用也是很方便，初始數(shù)據(jù)在中繼器表格中填寫后，即可自動生成交互效果。

以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動手試試哦，感謝您的閱讀，我們下期見。