Axure高保真教程:怎么將中繼器里選中的數據傳遞到另一個(gè)中繼器

0 評論 926 瀏覽 1 收藏 12 分鐘

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

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

一、效果展示

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

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

二、制作教程

1. 表格的制作

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

表頭的話(huà)我們用矩形和多選按鈕制作,如下圖所示擺放

這里需要注意的是,我們要把多選按鈕放在動(dòng)態(tài)面板的兩個(gè)狀態(tài)里,分別為選中和未選中,默認顯示未選中狀態(tài),因為我們不是直接點(diǎn)擊多選按鈕切換選中,所以我們用個(gè)透明矩形或者熱區,放在選中和未選中多選按鈕的上方遮擋。

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

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

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

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

  • colunm1~7列:分別對應第一到9格的內容,你們可以根據實(shí)際情況增加或減少
  • xuanzhong列:控制該行是否選中,一般默認為空,即未選中,如果想默認選中,就填1

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

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

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

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

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

這里我們需要記錄一下選中的個(gè)數,我們增加一個(gè)默認為0的文本標簽,用來(lái)記錄選中的個(gè)數,在中繼器每項加載的開(kāi)始,我們要設置他的初始值為0。如果xuanzhong列的值為1,我們就設置他為原來(lái)的值+1,這樣加載完中繼器,就可以獲取到,選中了幾個(gè)。

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

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

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

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

2. 表格數據的傳遞

我們要準備上下箭頭,以及提示彈窗,彈窗默認隱藏。

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

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

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

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

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

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

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

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

那以上就是本期教程的全部?jì)热?,感興趣的同學(xué)們可以動(dòng)手試試哦,感謝您的閱讀,我們下期見(jiàn)。

本文由 @AI產(chǎn)品人 原創(chuàng )發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉載

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議

該文觀(guān)點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒(méi)評論,等你發(fā)揮!