中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

中繼器是Axure里常用的一個工具，他可以制作高保真效果，包括增傷改成，中繼器可以說時一個小型的數據庫，那么，我們怎樣將一個中繼器里選中的數據，傳遞到另一個中繼器里呢？

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

一、效果展示

• 點擊多選按鈕可以選中對應的數據
• 點擊上下箭頭，可以將已選中的數據傳遞到另一個表格中
• 點擊表格頂部的多選按鈕，可以切換全選或者全部未選，也可以根據表格中選中的數量自動反選

二、制作教程

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函數，就可以將末尾的王五提取出來，然后將原來的|張三|李四|王五|的值設置為|張三|李四

其他列的內容也是同樣的操作，完成之后，我們用添加行的交互，將提取出來每列的第一個值，例如第一列是王五，添加到下方的中繼器里，上面的中繼器我們用刪除行的交互，刪除第一列為王五行，如果不需要刪除也可以不寫該交互。最后用觸發的事件來觸發這個交互不斷循環，這里就會自動提取最后一個|后面的文字，直到文本為空結束循環，這樣數據就傳遞完了

這樣我們就完成了將中繼器里選中的數據傳遞到另一個中繼器的原型模板了，后續使用也很方便，只需要在中繼器表格里填寫對應的信息，預覽后即可自動生成對應的效果。

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