Axure高保真教程：怎樣將中繼器里選中的數據轉達到另一此中繼器

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

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

一、后果展現

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

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

二、制造教程

1. 表格的制造

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 表格數據的轉達

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

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

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

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

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

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

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

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

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

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

本文由 @AI產物人 原創公布于各位都是產物司理，未經允許，克制轉載

題圖來自 Unsplash，基于 CC0 協議

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