Axure教程:如何實(shí)現(xiàn)Axure中繼器數(shù)組跨頁聯(lián)動(dòng)?
本文將介紹在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)。
思路
- 設(shè)置一個(gè)全局變量,用諸如1!2!3!來標(biāo)記參數(shù)位置
- 中繼器載入時(shí),從變量中截取1!到2!之間,2!到3!之間的參數(shù)置于合適的地方,每個(gè)數(shù)組分別放在{}里面,如兩組參數(shù),即{1!a2!b!c3!d}{1!e2!f!g3!h}
- 第一組參數(shù)參數(shù)賦值完成后,刪除{1!a2!b!c3!d},重復(fù)步驟2,使用第二組參數(shù){1!e2!f!g3!h}進(jìn)行賦值
- 增、刪、改后,提取整個(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!宇視NVR2 ” 的位置x:bmqhz.indexOf(m,0);
- 獲取從“ {1!宇視NVR2 ” 開始的第一個(gè) “ } ”的位置,此位置再加2(為了覆蓋后面的序列號(hào)),得到y(tǒng):bmqhz.indexOf(‘}’,bmqhz.indexOf(m,0))+2;
- 截取“宇視NVR2”所在數(shù)組的字符: bmqhz.substring(x,y);
- 把“宇視NVR2”所在數(shù)組的字符從變量中刪除:bmqhz.replace(‘bmqhz.substring(x,y)’,”) ;再把步驟1和2中的x、y代入進(jìn)來。
最后,我們來操作一下
- 在“編碼器管理”頁面添加設(shè)備,或者修改、刪除設(shè)備;
- 切換到“展示編碼器”頁面,我們可以看到設(shè)備名稱列表,是和管理頁面一致的;
- 在“展示編碼器”頁面刪除設(shè)備,再切換到“編碼器管理”頁,設(shè)備一致;
- 來回切換數(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é)議
您好,我想問一下,如果在中繼器最后再添加一列,然后讓變量最后的序列號(hào) 跑到我添加的這一列后面,要改哪些東西呢
不得不說,思路是真牛,看了3天,終于看懂了
好酷
非常高級(jí)、有用,炫酷。感謝樓主的無私分享,已經(jīng)從百度云下載下來了,學(xué)到了很多東西!
而且層面比較深,用了很多開發(fā)技術(shù)的知識(shí),對(duì)于不會(huì)開發(fā)的人可以直接用!
感謝你的留言和點(diǎn)贊。
您好,我想問一下,如果在中繼器最后再添加一列,然后讓變量最后的序列號(hào) 跑到我添加的這一列后面,要改哪些東西呢
為什么點(diǎn)完“新增”之后,變量里的序列號(hào)全沒了