Axure高保真教程：怎樣將中繼器里選中的數(shù)據(jù)轉(zhuǎn)達到另一此中繼器

中繼器是Axure里常用的一個東西，他可以制造高保真后果，包含增傷改成，中繼器可以說時一個小型的數(shù)據(jù)庫，那么，我們怎樣將一此中繼器里選中的數(shù)據(jù)，轉(zhuǎn)達到另一此中繼器里呢？

今天作者就以多選穿越表格為案例，教各位怎樣將中繼器里選中的數(shù)據(jù)轉(zhuǎn)達到另一此中繼器，具體后果如下所示：

一、后果展現(xiàn)

• 點擊多選按鈕可以選中對應(yīng)的數(shù)據(jù)
• 點擊上下箭頭，可以將已選中的數(shù)據(jù)轉(zhuǎn)達到另一個表格中
• 點擊表格頂部的多選按鈕，可以切換全選大概全部未選，也可以依據(jù)表格中選中的數(shù)目主動反選

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

二、制造教程

1. 表格的制造

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

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

這里必要注意的是，我們要把多選按鈕放在動態(tài)面板的兩個形態(tài)里，分散為選中和未選中，默許體現(xiàn)未選中形態(tài)，由于我們不是直接點擊多選按鈕切換選中，以是我們用個純透矩形大概熱區(qū)，放在選中和未選中多選按鈕的上方遮擋。

中繼器表格所需的元件和外表一次，只不外是將玄色背景改成純透，如下圖所示

假如必要表格單雙行斑馬線后果的也可以在中繼器背景顏色設(shè)置瓜代顏色

假如必要移入變色后果，也可以設(shè)置增長一個背景矩形，設(shè)置鼠標懸停的樣式

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

• colunm1~7列：分散對應(yīng)第一到9格的內(nèi)容，你們可以依據(jù)實踐情況增長或變小
• xuanzhong列：控制該行對否選中，尋常默以為空，即未選中，假如想默許選中，就填1

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

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

鼠標單擊未選中形態(tài)的多選按鈕的遮掩元件時，相當于要從未選中設(shè)置到選中，我們用更新行的交互，將如今行的xuanzhong列的值設(shè)置為1

鼠標單擊選中形態(tài)的多選按鈕的遮掩元件時，相當于要從選中設(shè)置到未選中，我們用更新行的交互，將如今行的xuanzhong列的值設(shè)置為0

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

這里我們必要紀錄一下選中的個數(shù)，我們增長一個默以為0的文本標簽，用來紀錄選中的個數(shù)，在中繼器每項加載的開頭，我們要設(shè)置他的初始值為0。假如xuanzhong列的值為1，我們就設(shè)置他為原本的值+1，如此加載完中繼器，就可以獲取到，選中了幾個。

然后我們就可以推斷對否全選了，假如紀錄的選中數(shù)=中繼器表格的項目數(shù)，就相當于全選，我們用設(shè)置面板形態(tài)的交互，將全選按鈕的動態(tài)面板設(shè)置為選中的形態(tài)；假如假如紀錄的選中數(shù)≠中繼器表格的項目數(shù)，就相當于沒有全選，我們用設(shè)置面板形態(tài)的交互，將全選按鈕的動態(tài)面板設(shè)置為未選中的形態(tài)

鼠標點擊表頭的全選按鈕，假如是在未選的形態(tài)，就會點擊到未選按鈕上方遮掩的元件，相當于是想全選中繼器表格的一切行，以是我們可以先用標志行的交互，將一切行標志，然后用更新行的交互，將已標志的一切行的xuanzhong列的值更新為1

假如是在全選的形態(tài)，就會點擊到全選按鈕上方遮掩的元件，相當于是想將中繼器表格的一切行取消選中，以是我們可以先用標志行的交互，將一切行標志，然后用更新行的交互，將已標志的一切行的xuanzhong列的值更新為0

如此我們表格的局部就完成了，我們可以復制一個，案例中上下表格的格式是一樣的，默許內(nèi)容為空，就是一行數(shù)據(jù)都沒有，僅有表頭，固然你們也可以改成不一樣。

2. 表格數(shù)據(jù)的轉(zhuǎn)達

我們要準備上下箭頭，以及提示彈窗，彈窗默許隱蔽。

點擊下箭頭就是將上方選中的數(shù)據(jù)轉(zhuǎn)達到下方，點擊上箭頭就是把下方選中的數(shù)據(jù)轉(zhuǎn)達到上方。原理都是一樣的，只是朝向不一樣，以是底下我們會以上方數(shù)據(jù)轉(zhuǎn)達到下方為案例分析怎樣轉(zhuǎn)達。

起首我們要經(jīng)過文本標簽紀錄我們必要選中上方表格的行數(shù)據(jù)，默以為空，中繼器開頭加載時可以經(jīng)過設(shè)置文本的交互將他設(shè)置為空值。然后假如選中列的值為1，那我們就將對應(yīng)列的數(shù)據(jù)紀錄到文本標簽里，以第一列為例，比如選中里張三李四王五這三行，我們用設(shè)置文本的交互將張三、李四和王五設(shè)置到文本標簽里，這里我們必要用標記分開開，便利我們提取，以是就設(shè)置成張三|李四|王五|。其他列相反真理，將選中行對應(yīng)列的值設(shè)置保文本標簽中紀錄。

如此我們就告捷的紀錄了表格選中的各列的值

鼠標點擊下箭頭時，我們起主要推斷，有沒有內(nèi)容選中，我們可以經(jīng)過推斷此中一個紀錄文本的值對否為空，假如為空就是一個都沒有選中，我們就體現(xiàn)提示彈窗

假如紀錄筆墨有內(nèi)容，就是有選中的，我們用開頭提取文本，將選項值添加到下方的中繼器里

這里相反以第一列為例，比如選中張三李四王五，我們前方設(shè)置的交互取得的值為|張三|李四|王五，我們要先提取張三出來，我們可以用lastindexof函數(shù)，他可以獲取某個字符最初一次顯現(xiàn)的地點地點的地點，案例中是|字符。曉得他在第幾位之后，我們用slice函數(shù)，就可以將末了的王五提取出來，然后將原本的|張三|李四|王五|的值設(shè)置為|張三|李四

其他列的內(nèi)容也是相反的利用，完成之后，我們用添加行的交互，將提取出來每列的第一個值，比如第一列是王五，添加到下方的中繼器里，外表的中繼器我們用刪除行的交互，刪除第一列為王五行，假如不必要刪除也可以不寫該交互。最初用觸發(fā)的事變來觸發(fā)這個交互不休循環(huán)，這里就會主動提取最初一個|后方的筆墨，直到文本為空完畢循環(huán)，如此數(shù)據(jù)就轉(zhuǎn)達完了

如此我們就完成了將中繼器里選中的數(shù)據(jù)轉(zhuǎn)達到另一此中繼器的原型模板了，后續(xù)使用也很便利，只必要在中繼器表格里填寫對應(yīng)的信息，預覽后即可主動天生對應(yīng)的后果。

那以上就是本期教程的全部內(nèi)容，感興致的同硯們可以入手試試哦，感激您的閱讀，我們下期見。

本文由 @AI產(chǎn)物人 原創(chuàng)公布于各位都是產(chǎn)物司理，未經(jīng)允許，克制轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議

該文看法僅代表作者本人，各位都是產(chǎn)物司理平臺僅提供信息存儲空間辦事。