Repeater 教程

雙擊 Repeater 小部件

http://wiki.jikexueyuan.com/project/axure/images/repeater-widget-tutorials-repeater-tutorial-1.png" alt="" />

首先，打開 AxureRepeaterTutorial.rp，然后打開 Repeater Tutorial 頁面。

在這個示例中，我們會創(chuàng)建一個簡單地?cái)?shù)據(jù)集，允許你對其進(jìn)行增加，刪除，排序等操作。

雙擊 repeater 小部件（泛綠的那塊）來對其進(jìn)行編輯。

添加一行數(shù)據(jù)

http://wiki.jikexueyuan.com/project/axure/images/repeater-widget-tutorials-repeater-tutorial-2.png" alt="" />

在底部的中間面板中，選擇 Repeater Dataset（Repeater 數(shù)據(jù)集）標(biāo)簽頁。點(diǎn)擊 Add Row（添加行）按鈕并且輸入內(nèi)容 Jacket，然后選擇右邊的框并輸入 99.99。

為矩形添加 Set Text action

http://wiki.jikexueyuan.com/project/axure/images/repeater-widget-tutorials-repeater-tutorial-3.png" alt="" />

在同一個面板內(nèi)，選擇 Repeater Item Interactions（Repeater 項(xiàng)目互動）標(biāo)簽頁。

雙擊 Set text（設(shè)置文本）來打開 Case Editor，選擇 Price，然后在下拉菜單中選擇 Value，將值改為 [[item.Prop2]]。

點(diǎn)擊 OK。

添加 Sort（排序）action

http://wiki.jikexueyuan.com/project/axure/images/repeater-widget-tutorials-repeater-tutorial-4.png" alt="" />

通過 sitemap 回到 Repeater Tutorial 頁面。選擇 Sort 按鈕并對其添加 OnClick case 和 Add Sort action。

選擇 repeater 然后命名為 alpha1。 在 Sort as（以...排序）下拉菜單中選擇 Text（文本）。

點(diǎn)擊 OK。

為 Add 按鈕創(chuàng)建 Add Row（添加行）action

http://wiki.jikexueyuan.com/project/axure/images/repeater-widget-tutorials-repeater-tutorial-5.png" alt="" />

選擇標(biāo)簽為 Add 的按鈕，為其創(chuàng)建一個 OnClick event，然后在 Repeaters-Datasets 下選擇 Add Rows action。

點(diǎn)擊在 Prop1 下的 Add Row，然后輸入文本 Socks，按下鍵盤上的 Tab 鍵，在 Prop2 列下輸入 3.99。

點(diǎn)擊 OK 來關(guān)閉彈窗和 Case Editor。

為 Mark Repeater Item（標(biāo)記 Repeater 項(xiàng)目）添加 action

http://wiki.jikexueyuan.com/project/axure/images/repeater-widget-tutorials-repeater-tutorial-6.png" alt="" />

雙擊 repeater 并選擇復(fù)選框。添加一個 OnCheckedChange event，然后選擇 Mark Rows action。

選擇 Repeater 然后保留默認(rèn)關(guān)于 This 的選項(xiàng)。

點(diǎn)擊 OK。

創(chuàng)建 Delete Row（刪除行）action

http://wiki.jikexueyuan.com/project/axure/images/repeater-widget-tutorials-repeater-tutorial-7.png" alt="" />

回到 Repeater Tutorial 頁面，然后為 Remove 小部件添加一個 OnClick event。選擇 Delete Rows action，選擇 repeater，然后選擇 Marked（已標(biāo)記）。

點(diǎn)擊 OK。

預(yù)覽原型

http://wiki.jikexueyuan.com/project/axure/images/repeater-widget-tutorials-repeater-tutorial-8.png" alt="" />

點(diǎn)擊工具欄內(nèi)的預(yù)覽圖標(biāo)即可預(yù)覽原型。您的原型現(xiàn)在應(yīng)該能排序，添加，刪除行了。

總結(jié)

記得先對行進(jìn)行標(biāo)記再進(jìn)行更新或者刪除操作！如果需要延伸閱讀，請拜訪Repeater 論壇。