Axure教程:讓中繼器像數(shù)據(jù)庫(kù)一樣,實(shí)現(xiàn)數(shù)據(jù)查詢、修改、判斷功能

5 評(píng)論 32472 瀏覽 76 收藏 14 分鐘

如何讓中繼器也可以像數(shù)據(jù)庫(kù)一樣,實(shí)現(xiàn)數(shù)據(jù)查詢、修改、判斷等功能呢?文章為你解讀。

在用Axure制作原型的過(guò)程中,大部分人都將中繼器當(dāng)做數(shù)據(jù)存儲(chǔ)的工具,可以快速格式化展示一系列排版相同的數(shù)據(jù),例如商品展示圖文列表、各種文字表格等。但是你有沒(méi)有想過(guò),中繼器也可以像數(shù)據(jù)庫(kù)一樣,實(shí)現(xiàn)數(shù)據(jù)查詢、修改、判斷等功能呢(例如在下表中直接查詢ID為2的人的姓名,或者修改姓名為wang的人的學(xué)號(hào))?

中繼器相關(guān)函數(shù)難點(diǎn)分析

中繼器函數(shù)

目前中繼器中提供可以查詢內(nèi)部數(shù)據(jù)的函數(shù)只有「Repeater」,當(dāng)我們使用此函數(shù)時(shí)只能獲得以數(shù)組形式排列的整個(gè)中繼器內(nèi)的數(shù)據(jù)。例如:

對(duì)中繼器使用函數(shù)Repeater.text時(shí),得到以下數(shù)據(jù)

由此我們得知:中繼器內(nèi)的數(shù)據(jù)是以「數(shù)組」形式儲(chǔ)存的,當(dāng)輸出時(shí),每個(gè)數(shù)組之間通過(guò)換行符’\n’連接。

這時(shí)候有人會(huì)問(wèn),為什么不像數(shù)據(jù)庫(kù)一樣,直接按照Repeater[0][0]類似的形式直接輸出某個(gè)字段呢?很抱歉,通過(guò)測(cè)試發(fā)現(xiàn),目前Axure中的函數(shù)是不能識(shí)別數(shù)組的,而「Item.列名」這個(gè)函數(shù)也只能直接對(duì)中繼器的動(dòng)作中(例如篩選、更新等)使用,并不能在其他函數(shù)賦值中直接使用。如下圖:

字符串處理

現(xiàn)在我們已經(jīng)知道,通過(guò)直接調(diào)用中繼器某個(gè)具體字段的方式已經(jīng)破滅了。

回到開(kāi)始,目前我們外部組件能獲取中繼器數(shù)據(jù)只有「Repeater」一個(gè)函數(shù)可以用了,但是它里面的數(shù)據(jù)是整個(gè)中繼器的所有數(shù)據(jù),而且還是每個(gè)數(shù)據(jù)換行展示的,離我們想要的某個(gè)字段差距太遠(yuǎn)了,怎么辦呢?

1. 篩選中繼器,獲取指定行內(nèi)容

首先我們做的的是篩選,通過(guò)中繼器的篩選功能,將中繼器數(shù)據(jù)指定到我們想要的那一行數(shù)據(jù)中,例如當(dāng)我們想獲得ID是1的人的姓名時(shí),我們直接對(duì)ID進(jìn)行篩選。

此時(shí)我們看到,其他沒(méi)用行的數(shù)據(jù)已經(jīng)消失了,貌似離我們想要的結(jié)果進(jìn)了很多。

2. 格式化數(shù)據(jù)

如果想要獲得姓名這個(gè)字段,我們需要將得到的數(shù)據(jù)進(jìn)行格式化,調(diào)整為一行字符串顯示,并且每個(gè)字段之間通過(guò)「,」隔開(kāi)。這時(shí)候需要用到「split(‘separator’,limit)」函數(shù)(返回字符串),第一個(gè)參數(shù)是分割字符,此時(shí)我們用換行符’\n’進(jìn)行分割,第二個(gè)字符是分割最長(zhǎng)的字符串個(gè)數(shù),這里可以省略。

是不是已經(jīng)有點(diǎn)感覺(jué)了呢?Axure提供了那么多的字符串處理函數(shù),如果想獲得’li’這個(gè)字符串,是不是很簡(jiǎn)單呢?

3. 截取字符串

字符串都是以「0」開(kāi)始排列的,’li’的位置應(yīng)該是從2到3.那么我們使用「substring(from,to)」函數(shù)(返回字符串),就可以得到這個(gè)姓名了。

這時(shí)候有人會(huì)問(wèn),如果姓名字符長(zhǎng)度不確定呢?沒(méi)問(wèn)題,我們已經(jīng)知道了每個(gè)字符組是通過(guò)「,」隔開(kāi)的,那么我們直接截取第一個(gè)’,’到第二個(gè)’,’之間的內(nèi)容就可以了。

怎么找到’,’的位置呢?使用「indexOf(’searchValue’,start)」(返回?cái)?shù)字)函數(shù)就可以了,前面的字段是查找內(nèi)容’,’,后面的字段是字符串開(kāi)始查找的位置,例如通過(guò)

LVAR.substring(LVAR.indexOf(‘,’),LVAR.indexOf(‘,’,(LVAR.indexOf(‘,’)+1)))

OH,NO!你已經(jīng)亂了?突然來(lái)了一個(gè)這么長(zhǎng)的,到底是什么東西?那好,我給你分析下:

  1. 查找字符串LVAR中第一個(gè)’,’出現(xiàn)的位置,返回?cái)?shù)字。為什么要+1呢?因?yàn)樗妮敵鲎鳛榍懊鍸VAR.indexOf(2)的起始查找位置,就是說(shuō)查找2字符串時(shí)候,是從它第一個(gè)’,’后面的一個(gè)字符開(kāi)始查找的。
  2. 從字符串LVAR第一個(gè)’,’的后一位開(kāi)始查找’,’,說(shuō)白了就是得到字符串LVAR第二個(gè)’,’的位置。
  3. 截取字符串LVAR從第一個(gè)’,’出現(xiàn)的位置開(kāi)始到第二個(gè)’,’出現(xiàn)的位置。

這下明白了嗎?還要記住一點(diǎn),就是substring函數(shù)截取的時(shí)候,是保留前面的第一個(gè)字符,不保留最后面的字符。所以當(dāng)讀取到第一個(gè)’,’的時(shí)候,要從它后面開(kāi)始截取,一直到第二個(gè)’,’出現(xiàn)為止。

挑戰(zhàn)升級(jí)

不知道還有幾個(gè)人能看到這里,因?yàn)榇蟛糠秩丝赡苓€是抱著一個(gè)失望的態(tài)度,『看了半天你就告訴我怎么截取字符串嗎?老子800年前就會(huì)了,這跟數(shù)據(jù)庫(kù)查的太遠(yuǎn)了吧,我怎么能隨便查詢?nèi)我鈪?shù)呢?』

別急,上面都是基礎(chǔ),干貨來(lái)了。

需要函數(shù):

Repeater.text 確保中繼器返回的是字符串

split(”) 按照特定分隔符分割字符串

substring(from,to) 按照指定位置分割字符串

indexOf() 查找某個(gè)字符串在字符串出現(xiàn)位置

concat() 連接字符串

length 獲取字符串長(zhǎng)度

場(chǎng)景設(shè)計(jì)

學(xué)校有一個(gè)【人員管理系統(tǒng)】,系統(tǒng)里包含所有學(xué)生的姓名、學(xué)院、電話、年齡等各種信息。使用者可以通過(guò)姓名查詢學(xué)生的任意其他特定信息,也可以修改任意信息。

例如:查詢王剛的班級(jí),查詢鄧爽的電話號(hào)碼等。

構(gòu)架分析

由需求得知我們需要查詢指定姓名人員的某項(xiàng)信息,即數(shù)據(jù)庫(kù)中特定行中的某項(xiàng)。由上文得知,我們可以通過(guò)篩選中繼器方式得到指定行數(shù)據(jù),即指定姓名的所有信息。然后通過(guò)切割字符串的方式查找到指定項(xiàng)目的信息。

在整個(gè)環(huán)節(jié)中,只有「查找項(xiàng)目字段位置」是個(gè)難點(diǎn),因?yàn)轫?xiàng)目是不確定的,在輸出后的字符串中,只有按照「,」分割的數(shù)據(jù)內(nèi)容,并不能知道每個(gè)數(shù)據(jù)代表著什么,所以如何查找指定項(xiàng)目的位置呢?

這里我們引入了一個(gè)類似「列名」的輔助字段,即將所有的數(shù)據(jù)內(nèi)容前面加上一個(gè)列名標(biāo)識(shí),例如:

姓名中的數(shù)據(jù)變?yōu)?王剛——name_王剛

班級(jí)中的數(shù)據(jù)變?yōu)?通信信息——class_通信信息

手機(jī)中的數(shù)據(jù)變?yōu)?23456——phone_23456

年齡中的數(shù)據(jù)變?yōu)?22——age_22

這樣我們獲得某一行的字符串?dāng)?shù)據(jù)就變化成了:

王剛,通信信息,23456,22—— name_王剛,class_通信信息,phone_23456,age_22

看到了嗎?我們得到了一個(gè)有標(biāo)識(shí)的字符串,相信有些人已經(jīng)想明白了,我們?cè)谧址型ㄟ^(guò)數(shù)據(jù)前面的標(biāo)識(shí)就可以判斷每個(gè)數(shù)據(jù)是什么意思了。如果想得到班級(jí),識(shí)別’class_’,如果想得到年齡,識(shí)別’age_’就可以了,無(wú)論數(shù)據(jù)有多少項(xiàng),無(wú)論它位置在哪,只要我們指定想要數(shù)據(jù)的標(biāo)識(shí)就可以了。

系統(tǒng)搭建

優(yōu)化數(shù)據(jù)表

將原有數(shù)據(jù)按照指定數(shù)據(jù)格式優(yōu)化(關(guān)于在excel中為同一列中每項(xiàng)數(shù)據(jù)增加字符的方法有很多),優(yōu)化后添加到中繼器數(shù)據(jù)中。

設(shè)置全局變量

首先設(shè)置一個(gè)表示查詢項(xiàng)目的變量「Finder」,通過(guò)查詢的項(xiàng)目?jī)?nèi)容為「Finder」賦值。 之后設(shè)置每個(gè)查詢項(xiàng)目對(duì)應(yīng)的特定前綴,name_、class_等。

設(shè)置查詢面板

查詢面板包括姓名文本框,查詢項(xiàng)目列表框,查詢按鈕。

當(dāng)切換查詢項(xiàng)目時(shí),系統(tǒng)將查詢項(xiàng)目賦值給項(xiàng)目變量「Finder」,項(xiàng)目變量默認(rèn)值與查詢項(xiàng)目列表默認(rèn)值相同。

當(dāng)點(diǎn)擊查詢按鈕時(shí),將「姓名」賦值給全局變量「Name」,然后按照「姓名」文本框篩選中繼器數(shù)據(jù),之后按照項(xiàng)目變量「Finder」將具體項(xiàng)目數(shù)值顯示到查詢結(jié)果中。

設(shè)置查詢結(jié)果面板

查詢結(jié)果包括姓名及查詢內(nèi)容結(jié)果,對(duì)應(yīng)文本框顯示相應(yīng)信息即可,在此不再贅述。

函數(shù)分析

以下是查詢結(jié)果顯示的函數(shù):

[[A2.text.split(‘\n’).concat(‘,’).substring((A2.text.split(‘\n’).indexOf(Finder)+Finder.length),A2.text.split(‘\n’).concat(‘,’).indexOf(‘,’,(A2.text.split(‘\n’).indexOf(Finder))))]]

如果上文看懂的人會(huì)發(fā)現(xiàn)這里有幾個(gè)特殊的地方:

A2.text.split(‘\n’).concat(‘,’):在重新排列字符串最后加一個(gè)’,’,為了防止查找不到最后一個(gè)’,’而出現(xiàn)bug。

A2.text.split(‘\n’).indexOf(Finder)+Finder.length:因?yàn)镕inder字符串長(zhǎng)度的不確定性,切割的起始位置是從「Finder」字符串后開(kāi)始切割的。

系統(tǒng)優(yōu)化

由于時(shí)間原因功能做的比較簡(jiǎn)單,但是通過(guò)這個(gè)方法我們可以查找或修改任意項(xiàng)目的內(nèi)容,比如查找某個(gè)學(xué)生的全部信息,按照班級(jí)查找某個(gè)姓名的學(xué)生等。

結(jié)語(yǔ)

這篇文章主要提供了一種將中繼器設(shè)計(jì)成數(shù)據(jù)庫(kù)的方法,看似雖然繁瑣,其實(shí)定義好所有內(nèi)容后,可以為Axure實(shí)現(xiàn)更多的類似數(shù)據(jù)庫(kù)的數(shù)據(jù)查詢、修改、判斷等功能,而不是單純的數(shù)據(jù)展示。希望喜歡的人可以用到。

以下為源文件下載鏈接:鏈接:http://pan.baidu.com/s/1i4JTQAT? 密碼:lbrc

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 把這個(gè)做出來(lái),我都把整份原型做好了,花90%的時(shí)間在設(shè)計(jì)一個(gè)表格查詢值得么,文字描述就完了,除非你是想用axure做系統(tǒng),這樣你還得考慮怎么把數(shù)據(jù)存起來(lái),不然刷新全沒(méi)了

    來(lái)自廣東 回復(fù)
  2. 看得迷迷糊糊啊

    來(lái)自浙江 回復(fù)
  3. 太硬核了

    來(lái)自北京 回復(fù)
  4. 樓主,其實(shí)用不著這么復(fù)雜,先用中繼器將篩選的值傳遞出來(lái),再根據(jù)條件,設(shè)置文本 ,選擇對(duì)應(yīng)字段就好了

    來(lái)自四川 回復(fù)
  5. 一直沒(méi)明白,類似中繼器什么的,對(duì)產(chǎn)品設(shè)計(jì)的意義在哪。

    來(lái)自浙江 回復(fù)