中繼器是Axure里常用的一個(gè)工具，他可以制作高保真效果，包括增傷改成，中繼器可以說時(shí)一個(gè)小型的數(shù)據(jù)庫，那么，我們?cè)鯓訉⒁粋€(gè)中繼器里選中的數(shù)據(jù)，傳遞到另一個(gè)中繼器里呢？

今天作者就以多選穿梭表格為案例，教大家怎么將中繼器里選中的數(shù)據(jù)傳遞到另一個(gè)中繼器，具體效果如下所示：

一、效果展示

• 點(diǎn)擊多選按鈕可以選中對(duì)應(yīng)的數(shù)據(jù)
• 點(diǎn)擊上下箭頭，可以將已選中的數(shù)據(jù)傳遞到另一個(gè)表格中
• 點(diǎn)擊表格頂部的多選按鈕，可以切換全選或者全部未選，也可以根據(jù)表格中選中的數(shù)量自動(dòng)反選

原型地址：https://ez97sl.axshare.com

二、制作教程

1. 表格的制作

表格我們分為表頭和中繼器表格兩部分

表頭的話我們用矩形和多選按鈕制作，如下圖所示擺放

這里需要注意的是，我們要把多選按鈕放在動(dòng)態(tài)面板的兩個(gè)狀態(tài)里，分別為選中和未選中，默認(rèn)顯示未選中狀態(tài)，因?yàn)槲覀儾皇侵苯狱c(diǎn)擊多選按鈕切換選中，所以我們用個(gè)透明矩形或者熱區(qū)，放在選中和未選中多選按鈕的上方遮擋。

中繼器表格所需的元件和上面一次，只不過是將黑色背景改成透明，如下圖所示

如果需要表格單雙行斑馬線效果的也可以在中繼器背景顏色設(shè)置交替顏色

如果需要移入變色效果，也可以設(shè)置增加一個(gè)背景矩形，設(shè)置鼠標(biāo)懸停的樣式

中繼器表格需要包含以下列：

• colunm1~7列：分別對(duì)應(yīng)第一到9格的內(nèi)容，你們可以根據(jù)實(shí)際情況增加或減少
• xuanzhong列：控制該行是否選中，一般默認(rèn)為空，即未選中，如果想默認(rèn)選中，就填1

然后我們要將中繼器表格里的值設(shè)置到對(duì)應(yīng)的元件里，如果是axure10的話，直接點(diǎn)擊表格每列里的連接，選擇對(duì)應(yīng)元件即可；如果是axure8或9，就要在中繼器每項(xiàng)加載時(shí)，用設(shè)置文本的交互，將表格里對(duì)應(yīng)列的值設(shè)置到對(duì)應(yīng)的元件

如果xuanzhong列的值為1，那我們就用設(shè)置面板狀態(tài)的交互，將中繼器里多選按鈕的動(dòng)態(tài)面板設(shè)置到選中的狀態(tài)。

鼠標(biāo)單擊未選中狀態(tài)的多選按鈕的遮蓋元件時(shí)，相當(dāng)于要從未選中設(shè)置到選中，我們用更新行的交互，將當(dāng)前行的xuanzhong列的值設(shè)置為1

鼠標(biāo)單擊選中狀態(tài)的多選按鈕的遮蓋元件時(shí)，相當(dāng)于要從選中設(shè)置到未選中，我們用更新行的交互，將當(dāng)前行的xuanzhong列的值設(shè)置為0

然后我們還要做一個(gè)反選的邏輯，如果中繼器表格里所有行都被選中，就要讓表頭的全選按鈕設(shè)置為選中狀態(tài)，否則就是未選狀態(tài)。

這里我們需要記錄一下選中的個(gè)數(shù)，我們?cè)黾右粋€(gè)默認(rèn)為0的文本標(biāo)簽，用來記錄選中的個(gè)數(shù)，在中繼器每項(xiàng)加載的開始，我們要設(shè)置他的初始值為0。如果xuanzhong列的值為1，我們就設(shè)置他為原來的值+1，這樣加載完中繼器，就可以獲取到，選中了幾個(gè)。

然后我們就可以判斷是否全選了，如果記錄的選中數(shù)=中繼器表格的項(xiàng)目數(shù)，就相當(dāng)于全選，我們用設(shè)置面板狀態(tài)的交互，將全選按鈕的動(dòng)態(tài)面板設(shè)置為選中的狀態(tài)；如果如果記錄的選中數(shù)≠中繼器表格的項(xiàng)目數(shù)，就相當(dāng)于沒有全選，我們用設(shè)置面板狀態(tài)的交互，將全選按鈕的動(dòng)態(tài)面板設(shè)置為未選中的狀態(tài)

鼠標(biāo)點(diǎn)擊表頭的全選按鈕，如果是在未選的狀態(tài)，就會(huì)點(diǎn)擊到未選按鈕上方遮蓋的元件，相當(dāng)于是想全選中繼器表格的所有行，所以我們可以先用標(biāo)記行的交互，將所有行標(biāo)記，然后用更新行的交互，將已標(biāo)記的所有行的xuanzhong列的值更新為1

如果是在全選的狀態(tài)，就會(huì)點(diǎn)擊到全選按鈕上方遮蓋的元件，相當(dāng)于是想將中繼器表格的所有行取消選中，所以我們可以先用標(biāo)記行的交互，將所有行標(biāo)記，然后用更新行的交互，將已標(biāo)記的所有行的xuanzhong列的值更新為0

這樣我們表格的部分就完成了，我們可以復(fù)制一個(gè)，案例中上下表格的格式是一樣的，默認(rèn)內(nèi)容為空，就是一行數(shù)據(jù)都沒有，只有表頭，當(dāng)然你們也可以改成不一樣。

2. 表格數(shù)據(jù)的傳遞

我們要準(zhǔn)備上下箭頭，以及提示彈窗，彈窗默認(rèn)隱藏。

點(diǎn)擊下箭頭就是將上方選中的數(shù)據(jù)傳遞到下方，點(diǎn)擊上箭頭就是把下方選中的數(shù)據(jù)傳遞到上方。原理都是一樣的，只是方向不一樣，所以下面我們會(huì)以上方數(shù)據(jù)傳遞到下方為案例說明怎么傳遞。

首先我們要通過文本標(biāo)簽記錄我們需要選中上方表格的行數(shù)據(jù)，默認(rèn)為空，中繼器開始加載時(shí)可以通過設(shè)置文本的交互將他設(shè)置為空值。然后如果選中列的值為1，那我們就將對(duì)應(yīng)列的數(shù)據(jù)記錄到文本標(biāo)簽里，以第一列為例，例如選中里張三李四王五這三行，我們用設(shè)置文本的交互將張三、李四和王五設(shè)置到文本標(biāo)簽里，這里我們需要用符號(hào)分隔開，方便我們提取，所以就設(shè)置成張三|李四|王五|。其他列同樣道理，將選中行對(duì)應(yīng)列的值設(shè)置保文本標(biāo)簽中記錄。

這樣我們就成功的記錄了表格選中的各列的值

鼠標(biāo)點(diǎn)擊下箭頭時(shí)，我們首先要判斷，有沒有內(nèi)容選中，我們可以通過判斷其中一個(gè)記錄文本的值是否為空，如果為空就是一個(gè)都沒有選中，我們就顯示提示彈窗

如果記錄文字有內(nèi)容，就是有選中的，我們用開始提取文本，將選項(xiàng)值添加到下方的中繼器里

這里同樣以第一列為例，例如選中張三李四王五，我們前面設(shè)置的交互得到的值為|張三|李四|王五，我們要先提取張三出來，我們可以用lastindexof函數(shù)，他可以獲取某個(gè)字符最后一次出現(xiàn)的位置所在的位置，案例中是|字符。知道他在第幾位之后，我們用slice函數(shù)，就可以將末尾的王五提取出來，然后將原來的|張三|李四|王五|的值設(shè)置為|張三|李四

其他列的內(nèi)容也是同樣的操作，完成之后，我們用添加行的交互，將提取出來每列的第一個(gè)值，例如第一列是王五，添加到下方的中繼器里，上面的中繼器我們用刪除行的交互，刪除第一列為王五行，如果不需要?jiǎng)h除也可以不寫該交互。最后用觸發(fā)的事件來觸發(fā)這個(gè)交互不斷循環(huán)，這里就會(huì)自動(dòng)提取最后一個(gè)|后面的文字，直到文本為空結(jié)束循環(huán)，這樣數(shù)據(jù)就傳遞完了

這樣我們就完成了將中繼器里選中的數(shù)據(jù)傳遞到另一個(gè)中繼器的原型模板了，后續(xù)使用也很方便，只需要在中繼器表格里填寫對(duì)應(yīng)的信息，預(yù)覽后即可自動(dòng)生成對(duì)應(yīng)的效果。

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