Axure高保真教程:怎么將中繼器里選中的數(shù)據(jù)傳遞到另一個(gè)中繼器
中繼器是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)手試試哦,感謝您的閱讀,我們下期見。
本文由 @AI產(chǎn)品人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒評(píng)論,等你發(fā)揮!