Axure教程:如何實(shí)現(xiàn)Axure中繼器數(shù)組跨頁聯(lián)動(dòng)?

7 評(píng)論 12052 瀏覽 23 收藏 9 分鐘

本文將介紹在axure中,如何利用全局變量對(duì)一個(gè)中繼器里多個(gè)參數(shù)進(jìn)行保存和賦值。從而實(shí)現(xiàn)翻頁后,數(shù)據(jù)不被還原、能在不同頁面聯(lián)動(dòng),模擬數(shù)據(jù)庫存在的效果。

眾所周知,axure只能利用全局變量來實(shí)現(xiàn)頁面之間的數(shù)據(jù)傳遞,當(dāng)只有少量參數(shù)需要跨頁時(shí),我們?cè)O(shè)置相應(yīng)的全局變量即可。但如果數(shù)據(jù)較多時(shí),就不適合為每個(gè)參數(shù)都設(shè)置其相應(yīng)變量。現(xiàn)在,我們可以只用一個(gè)變量來實(shí)現(xiàn)。

思路

  1. 設(shè)置一個(gè)全局變量,用諸如1!2!3!來標(biāo)記參數(shù)位置
  2. 中繼器載入時(shí),從變量中截取1!到2!之間,2!到3!之間的參數(shù)置于合適的地方,每個(gè)數(shù)組分別放在{}里面,如兩組參數(shù),即{1!a2!b!c3!d}{1!e2!f!g3!h}
  3. 第一組參數(shù)參數(shù)賦值完成后,刪除{1!a2!b!c3!d},重復(fù)步驟2,使用第二組參數(shù){1!e2!f!g3!h}進(jìn)行賦值
  4. 增、刪、改后,提取整個(gè)中繼器對(duì)象的文本值,過濾無效參數(shù),還原成初始變量的格式。再存放回變量中。

實(shí)現(xiàn)過程(一):利用一個(gè)全局變量,對(duì)中繼器賦值并設(shè)置文本

(1)設(shè)置全局變量

m? 默認(rèn)值可以為空,用于數(shù)據(jù)臨時(shí)存放。

bmqhz? 用于存放整個(gè)中繼器的數(shù)據(jù)。默認(rèn)值可以為空,我這里設(shè)置了兩個(gè)數(shù)組:

{1!海康NVR2!192.168.10.203!5544!類型一5!admin6!系統(tǒng)默認(rèn)編碼器01}1

{1!宇視NVR2!192.168.88.203!5544!類型二5!admin6!系統(tǒng)默認(rèn)編碼器02}2

如圖,其對(duì)應(yīng)的參數(shù)名稱分別是“編碼器名稱、編碼器ip、編碼器端口、編碼器類型、用戶名、描述”(密碼用圓號(hào)代替,所以不用存變量)。

(2)中繼器數(shù)據(jù)賦值

1)中繼器載入時(shí):把變量bmqhz的數(shù)據(jù)復(fù)制到變量m,再從m截取第一個(gè)數(shù)組的參數(shù),存到中繼器相應(yīng)位置。

2)每項(xiàng)加載時(shí),設(shè)置文字為富文本,把標(biāo)記符號(hào)設(shè)置為透明字體,字體根據(jù)實(shí)際情況設(shè)置小點(diǎn)就行了。

3)第一個(gè)數(shù)組設(shè)置成文本內(nèi)容后,把它從變量m刪除,再觸發(fā)中繼器載入時(shí)的交互,使用第二個(gè)數(shù)組進(jìn)行賦值。

4)看看效果

實(shí)現(xiàn)過程(二):新增數(shù)據(jù)的保存

(1)以“名稱”為例,點(diǎn)擊“確認(rèn)”保存時(shí),把文本值放到中繼器,要在前面加 1!

(2)把中繼器的數(shù)據(jù)保存到變量中去

設(shè)置變量bmqhz為 [[LVAR1.text.replace(‘\n’,”).replace(‘1!’,'{1!’).replace(‘*’,”).replace(‘?’,”)]] ,其中LVAR1是中繼器元件。(可以先把中繼器對(duì)象的文本設(shè)置到矩形作為參考,再?zèng)Q定如何過濾,如下圖)

(3)編輯和刪除同理。如下圖,編輯后,確認(rèn)按鈕的交互設(shè)置:把參數(shù)從文本框取出來,加上標(biāo)記后更新到中繼器。

實(shí)現(xiàn)過程(三):頁面聯(lián)動(dòng)

頁面聯(lián)動(dòng),在另一頁面中展示設(shè)備名稱,對(duì)其的刪除操作,影響到上一頁面。

(1)展示系統(tǒng)中的編碼器設(shè)備:在新的頁面中,參考“實(shí)現(xiàn)過程(一)”中繼器的賦值方法即可,這里只顯示名稱。

(2)刪除編碼器設(shè)備:點(diǎn)擊刪除按鈕時(shí),在設(shè)備名稱前面加上{? ,再保存到變量m中,如上圖“海康NVR2”保存后,m = {1!海康NVR2 。在確認(rèn)刪除時(shí),在變量bmqhz中刪除“??礜VR2”對(duì)應(yīng)的數(shù)組,觸發(fā)中繼器載入時(shí)交互即可。

這個(gè)函數(shù),我們來拆解一下:

拿默認(rèn)變量為例(實(shí)際上沒換行符,下面換行是為了便于說明):

bmqhz =

{1!??礜VR2!192.168.10.203!5544!類型一5!admin6!系統(tǒng)默認(rèn)編碼器01}1

{1!宇視NVR2!192.168.88.203!5544!類型二5!admin6!系統(tǒng)默認(rèn)編碼器02}2

假設(shè)我們刪除的是第二個(gè)編碼器數(shù)據(jù),那么m存的數(shù)據(jù)就是?{1!宇視NVR ,我們拿到這個(gè)數(shù)據(jù)后,需要從變量中把第二個(gè)數(shù)組刪除。

  1. 獲取 “ {1!宇視NVR2 ” 的位置x:bmqhz.indexOf(m,0);
  2. 獲取從“ {1!宇視NVR2 ” 開始的第一個(gè) “ } ”的位置,此位置再加2(為了覆蓋后面的序列號(hào)),得到y(tǒng):bmqhz.indexOf(‘}’,bmqhz.indexOf(m,0))+2;
  3. 截取“宇視NVR2”所在數(shù)組的字符: bmqhz.substring(x,y);
  4. 把“宇視NVR2”所在數(shù)組的字符從變量中刪除:bmqhz.replace(‘bmqhz.substring(x,y)’,”) ;再把步驟1和2中的x、y代入進(jìn)來。

最后,我們來操作一下

  1. 在“編碼器管理”頁面添加設(shè)備,或者修改、刪除設(shè)備;
  2. 切換到“展示編碼器”頁面,我們可以看到設(shè)備名稱列表,是和管理頁面一致的;
  3. 在“展示編碼器”頁面刪除設(shè)備,再切換到“編碼器管理”頁,設(shè)備一致;
  4. 來回切換數(shù)據(jù)不丟失。

原型預(yù)覽地址:http://www.wulihub.com.cn/go/WvwR1Q/start.html

源文件下載鏈接:https://pan.baidu.com/s/18LXwvyI9nD6kWezUwM6ueg

提取碼:vfap

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 您好,我想問一下,如果在中繼器最后再添加一列,然后讓變量最后的序列號(hào) 跑到我添加的這一列后面,要改哪些東西呢

    來自云南 回復(fù)
  2. 不得不說,思路是真牛,看了3天,終于看懂了

    來自上海 回復(fù)
  3. 好酷

    來自福建 回復(fù)
  4. 非常高級(jí)、有用,炫酷。感謝樓主的無私分享,已經(jīng)從百度云下載下來了,學(xué)到了很多東西!
    而且層面比較深,用了很多開發(fā)技術(shù)的知識(shí),對(duì)于不會(huì)開發(fā)的人可以直接用!

    來自廣東 回復(fù)
    1. 感謝你的留言和點(diǎn)贊。

      回復(fù)
    2. 您好,我想問一下,如果在中繼器最后再添加一列,然后讓變量最后的序列號(hào) 跑到我添加的這一列后面,要改哪些東西呢

      來自云南 回復(fù)
    3. 為什么點(diǎn)完“新增”之后,變量里的序列號(hào)全沒了

      來自云南 回復(fù)