Axure8.0教程:利用中繼器對(duì)表格的增刪改操作
一直都是只看不發(fā)的那種,運(yùn)用axure制作原型也有很長(zhǎng)一段時(shí)間了,最近升級(jí)到8.0,用起來(lái)各種順手啊,就寫(xiě)了一個(gè)中繼器的教程,供新手學(xué)習(xí)。
原型主要是通過(guò)中繼器實(shí)現(xiàn)表格的增刪改操作,示例如下:
1 開(kāi)工前的原件準(zhǔn)備工作
文本框矩形框數(shù)個(gè)、下拉框一個(gè)、按鈕兩個(gè)、中繼器一個(gè)。建議做好原件命名,因?yàn)橹髸?huì)涉及到蠻多的交互,清晰的命名可以避免出現(xiàn)混亂。
然后我們需要對(duì)中繼器做一些處理,點(diǎn)擊中繼器,右側(cè)它的屬性頁(yè),可以把三個(gè)行都刪除,然后雙擊中繼器進(jìn)入中繼器編輯頁(yè)面。
按照表格每一列的名稱(chēng)在中繼器內(nèi)放入6個(gè)矩形框,做好元件命名。
現(xiàn)在是這個(gè)樣子的。
2 數(shù)據(jù)添加功能
準(zhǔn)備工作完成,然后我們需要為中繼器添加一下動(dòng)作,中繼器屬性面板選擇每項(xiàng)載入時(shí),當(dāng)打開(kāi)網(wǎng)頁(yè)或者添加數(shù)據(jù)時(shí)候,為中繼器加載數(shù)據(jù)集到元件。
特別注意的是,為了實(shí)現(xiàn)編號(hào)自增,編號(hào)的動(dòng)作設(shè)置為[[item.index]]
中繼器屬性面板為中繼器數(shù)據(jù)集添加列,也可以手動(dòng)添加一行數(shù)據(jù),如果是7.0的版本你的中繼器數(shù)據(jù)集應(yīng)該再頁(yè)面下方,8.0整合到右側(cè)
之后需要為添加按鈕配置點(diǎn)擊動(dòng)作,為中繼器“添加行”
點(diǎn)擊下方的 添加行 ,把輸入框和中繼器數(shù)據(jù)集綁定起來(lái):
到此,添加功能已經(jīng)完成。
3 單行選擇+刪除行
進(jìn)入中繼器頁(yè)面,選中6個(gè)矩形框,設(shè)置選中的動(dòng)作—填充顏色
同樣是選中6個(gè)矩形框的狀態(tài),按 ctrl+g,將6個(gè)矩形設(shè)為選項(xiàng)組,別忘了添加一個(gè)選項(xiàng)組名稱(chēng)(很重要),添加鼠標(biāo)點(diǎn)擊動(dòng)作,
標(biāo)記行是稍后的刪除動(dòng)作需要用到的,現(xiàn)在已經(jīng)可以選擇行,但是沒(méi)有單選效果,回到中繼器屬性
中間的勾去掉即可。
下面為“刪除行”按鈕配置動(dòng)作
此處非常簡(jiǎn)單,只需要為中繼器刪除行選擇已標(biāo)記即可,我們上一步標(biāo)記行的意義就在于此。
4 修改行
點(diǎn)擊修改按鈕,改行變?yōu)榭删庉嫚顟B(tài),同時(shí)修改按鈕變成保存按鈕,點(diǎn)擊保存之后保存修改后的數(shù)據(jù)。
中繼器修改框拖入兩個(gè)文本矩形,一個(gè)修改(xiugai)一個(gè)保存(baocun),默認(rèn)保存文本為隱藏狀態(tài)。
Xingming、xingbie、zhiwei、youxiang四個(gè)矩形框分別拖入一個(gè)文本輸入框,命名為”xiugai-xingming、xiugai-xingbie、xiugai-zhiwei、xiugai-youxiang“去掉邊框設(shè)為隱藏狀態(tài)。
然后為修改按鈕配置動(dòng)作:
點(diǎn)擊修改按鈕,顯示隱藏文本輸入框,同時(shí)文本輸入框獲取當(dāng)前行的值。
然后為保存按鈕配置動(dòng)作,點(diǎn)擊保存時(shí)中繼器更新行,同時(shí)中繼器數(shù)據(jù)集應(yīng)該設(shè)置為剛剛的隱藏文本框,這里與之前添加按鈕的配置基本一樣
至此,一個(gè)簡(jiǎn)單的利用中繼器增刪改的原型設(shè)計(jì)完成。
但是在預(yù)覽原型的時(shí)候會(huì)發(fā)現(xiàn)一些問(wèn)題:
添加數(shù)據(jù)的時(shí)候性別不選擇,或者輸入為空也可以添加成功,修改行的時(shí)候也有同樣的問(wèn)題,而且性別的位置可以隨意輸入沒(méi)有任何限制。
我上傳的原型中是有一些限制的,這里就不放出具體教程了,有不明白的可以咨詢(xún)。頭一次寫(xiě),會(huì)有一些不清晰的地方,歡迎建議指正!
rp文件地址:http://pan.baidu.com/s/1pL2dW63
本文由 @零零 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
樓主,網(wǎng)盤(pán)失效了,能在分享下嗎