袋裝零能量IG @womquo

Axure RP是許多網站專案經理或網站企劃人員

可用來製作原型(prototype)的好工具

有興趣深入了解Axure RP有哪些特色

只要輸入關鍵字"axure"就可以找到很多介紹的文章

所以我這裡就不再多做介紹了!!

而這篇文章主要是記錄自己的Axure學習

同時給跟我一樣已經具備Axure基本使用能力的學習者參考

因為Axure可以模擬非常多網站效果，只是必須要知道怎麼設定

就有點像寫程式，需要知道怎樣效果的程式語法該怎麼寫

好啦!不囉說~來進入正題:

如何利用Axure RP 7.0模擬篩選表格資料

STEP1:開啟Axure 並從widgets拉取需要的物件到網頁畫面規劃區

而模擬器篩選需要用到的物件有3種(分別如下圖1-3)

圖1-Text Field(文字輸入框)

圖2-Repeater(中繼器)

圖3-HTML BUTTEN (HTML按鈕)

STEP2:編輯Repeater(中繼器)

編輯說明詳見下圖4-11

圖4-雙擊Repeater開啟編輯畫面(圖5)

圖5-在下方Repeater Dataset處輸入欄位名稱和資料內容

(此處建立的表格資料，就像網站後台的資料庫對照表)

圖6-新增Space並設定顯示資料對應的位置

圖7-設定Repeater Item Interations

勾選要顯示的Space有哪些，並設定對應的欄位

圖8-設定對應的欄位-點擊fx可設定

圖9-點擊fx後會開啟Edit Text畫面

再點擊該畫面中的Insert Variable or Function

然後選擇Repeater /Dataset : Item.欄位名稱

圖10-設定好後要記得按OK

圖11-然後點擊Sitemap處的網頁就可以看實際會呈現的樣子

STEP3:利用Rectangle製作表格的標題(如圖12)

圖12-製作表格的標題列

STEP4:設定當使用者在輸入框中按下Enter(Return)按鈕後開始搜尋

說明詳見下圖13-15

圖13-選擇設定OnkeyDown(鍵盤按下時)

圖14-新增條件-只有按下Enter按鈕時才會觸發搜尋

選擇key pressed=key value Return

(Return只要在最後面的輸入框中按下要限定的按鈕就會自動出現)

圖15-點擊fx去設定搜尋函數

Insert Variable of Function下方輸入函數如下

[[Item.name.indexOf(text)+Item.nickname.indexOf(text)+Item.animal.indexOf(text)>-3]]

此函數中Item.XXX表示要搜尋的欄位

indexof('SearchValue')表示要搜尋的值

而此處因為是要搜尋輸入框輸入的文字，所以設定成text

且記得要設定Local Variables(即定義text=text on widget text)

而>-3是因[[Item.name.indexOf(text)]]

當沒有搜尋到的時候會返回數值-1，搜尋到第一個位置有返回數值0，依此類推

而要讓搜尋結果只要輸入的資料有在任一欄位中出現，

就顯示該列資料，就會等於(-1)+(-1)+(-1)=-3

STEP4:將Submit設定成搜尋按鈕

說明詳見下圖16-17

圖16-設定OnClick(滑鼠點擊按鈕時)會開始搜尋

圖17-函數設定除了不需要限定點擊鍵盤Enter按鈕，其餘都與輸入框的設定一樣

STEP5:按F5預覽

最後確認效果都跟自己預計的一樣就大功告成啦