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