Axure7.0教程(四)中繼器的使用(4)

Axure rp7.0的新元件中繼器(repeater)的功能中我們分別講解了增、刪、改三個(gè)功能,今天我們來講一下剩下的功能:
1、 按輸入的文字篩選;
2、 按指定條件(某一列)排序;
3、 翻頁功能。
本教程示例:axure7.0教程_小樓作品(四)中繼器的使用(4)
在學(xué)習(xí)本教程之前,請先閱讀《關(guān)于Axure rp7.0漢化包導(dǎo)致中繼器無法正常使用的bug說明》。當(dāng)然,如果在你閱讀這篇教程時(shí),上面提到的bug以解決的話,那么就請繼續(xù)往下看。
首先,我們先做一下準(zhǔn)備:
1、 在中繼器項(xiàng)目中添加多條數(shù)據(jù),以便更方便演示效果;
2、 添加一個(gè)文本框,設(shè)置好標(biāo)簽,用來輸入篩選條件,并添加一個(gè)按鈕用來觸發(fā)篩選事件;
3、 添加一個(gè)矩形或按鈕,轉(zhuǎn)換成兩個(gè)狀態(tài),用來觸發(fā)升序和降序事件的觸發(fā)。
一、篩選功能
準(zhǔn)備完畢后,我們先添加篩選事件,如下圖:
我們在篩選按鈕的onclick事件中添加一個(gè)用例,在這用例里面添加事件“新增過濾器”(Add filter),然后勾選過濾器,自定義一個(gè)名稱,在查詢里面讓item.XXX==局部變量。
說明:
1、 變量列表里面選擇或者直接輸入item.xxx;
2、 自定義局部變量=篩選條件輸入文本框的元件文字;
3、 這里注意是兩個(gè)“=”。一個(gè)的話是給變量賦值,兩個(gè)話是判斷是否一樣。
這樣根據(jù)輸入文字進(jìn)行篩選的功能就實(shí)現(xiàn)了。
二、排序功能
1、在動(dòng)態(tài)面板中的第一個(gè)狀態(tài)的按鈕上,添加事件:
(1)添加一個(gè)Add Sort–勾選中繼器–設(shè)置一個(gè)排序的自定義名稱—設(shè)置排序項(xiàng)目—設(shè)置按數(shù)字排序—設(shè)置按降序排列“Decending”(價(jià)格由高到低)。
(2)設(shè)置動(dòng)態(tài)面板狀態(tài)轉(zhuǎn)換為第二個(gè)狀態(tài)。
2、在動(dòng)態(tài)面板的第二個(gè)狀態(tài)的按鈕上,添加事件:
(1)參照上一步驟,最后一步設(shè)置為按升序排列“Ascending”(價(jià)格由低到高)。
(2)設(shè)置動(dòng)態(tài)面板狀態(tài)轉(zhuǎn)換為第二個(gè)狀態(tài)。
說明:在最后一步設(shè)置中還有一個(gè)選項(xiàng)“Toggle”,是升序與降序切換。
到這里,按價(jià)格排序的功能也實(shí)現(xiàn)了。
三、翻頁功能
這個(gè)最簡單,我們只需要添加兩個(gè)按鈕,分別是前一頁和后一頁,并在兩個(gè)按鈕的onclick事件上分別設(shè)置:
前一頁:添加Set Current Page,勾選中繼器,在Select the page中選擇“Previous”;
下一頁:添加Set Current Page,勾選中繼器,在Select the page中選擇“Next”;
說明:在Select the page選項(xiàng)中還有兩個(gè)選項(xiàng),分別是Value(根據(jù)值打開指定頁)和Last(最后頁)。
好了,翻頁功能也完成了。
下面就是見證奇跡的時(shí)刻!你做到了嗎?
作者:小樓
有沒好點(diǎn)的教程,這寫的真垃圾