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

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

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

中繼器函數(shù)

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

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

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

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

字符串處理

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

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

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

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

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

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

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

是不是已經(jīng)有點感覺了呢？Axure提供了那么多的字符串處理函數(shù)，如果想獲得’li’這個字符串，是不是很簡單呢？

3. 截取字符串

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

這時候有人會問，如果姓名字符長度不確定呢？沒問題，我們已經(jīng)知道了每個字符組是通過「,」隔開的，那么我們直接截取第一個’,’到第二個’,’之間的內(nèi)容就可以了。

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

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

OH，NO！你已經(jīng)亂了？突然來了一個這么長的，到底是什么東西？那好，我給你分析下：

1. 查找字符串LVAR中第一個’,’出現(xiàn)的位置，返回數(shù)字。為什么要+1呢？因為它的輸出作為前面LVAR.indexOf（2）的起始查找位置，就是說查找2字符串時候，是從它第一個’,’后面的一個字符開始查找的。
2. 從字符串LVAR第一個’,’的后一位開始查找’,’，說白了就是得到字符串LVAR第二個’,’的位置。
3. 截取字符串LVAR從第一個’,’出現(xiàn)的位置開始到第二個’,’出現(xiàn)的位置。

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

挑戰(zhàn)升級

不知道還有幾個人能看到這里，因為大部分人可能還是抱著一個失望的態(tài)度，『看了半天你就告訴我怎么截取字符串嗎？老子800年前就會了，這跟數(shù)據(jù)庫查的太遠了吧，我怎么能隨便查詢?nèi)我鈪?shù)呢？』

別急，上面都是基礎(chǔ)，干貨來了。

需要函數(shù)：

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

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

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

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

concat() 連接字符串

length 獲取字符串長度

場景設(shè)計

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

例如：查詢王剛的班級，查詢鄧爽的電話號碼等。

構(gòu)架分析

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

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

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

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

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

手機中的數(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

看到了嗎？我們得到了一個有標(biāo)識的字符串，相信有些人已經(jīng)想明白了，我們在字符串中通過數(shù)據(jù)前面的標(biāo)識就可以判斷每個數(shù)據(jù)是什么意思了。如果想得到班級，識別’class_’,如果想得到年齡，識別’age_’就可以了，無論數(shù)據(jù)有多少項，無論它位置在哪，只要我們指定想要數(shù)據(jù)的標(biāo)識就可以了。

系統(tǒng)搭建

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

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

設(shè)置全局變量

首先設(shè)置一個表示查詢項目的變量「Finder」，通過查詢的項目內(nèi)容為「Finder」賦值。 之后設(shè)置每個查詢項目對應(yīng)的特定前綴，name_、class_等。

設(shè)置查詢面板

查詢面板包括姓名文本框，查詢項目列表框，查詢按鈕。

當(dāng)切換查詢項目時，系統(tǒng)將查詢項目賦值給項目變量「Finder」，項目變量默認值與查詢項目列表默認值相同。

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

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

查詢結(jié)果包括姓名及查詢內(nèi)容結(jié)果，對應(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))))]]

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

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

A2.text.split(‘\n’).indexOf(Finder)+Finder.length：因為Finder字符串長度的不確定性，切割的起始位置是從「Finder」字符串后開始切割的。

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

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

結(jié)語

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

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

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

題圖來自PEXELS，基于CC0協(xié)議