Axure中繼器實現增刪改功能

Axure中的中繼器元件本質就是一個數據庫,用於實現數據的增刪改功能,可利用面向對象的思維理解會更便於學習應用。在使用中繼器時,對每列數據指定變量名稱,通過變量存儲操作數據,實現對數據的增刪改功能。

原型主要是通過中繼器實現表格的增刪改操作,示例如下:

10612070-4dcf9c1cb8c8c173.gif

10612070-a88027ee7e2d7a10.gif

10612070-a335dc84c8c5b7be.gif

1 開工前的原件準備工作

文本框矩形框數個、下拉框一個、按鈕兩個、中繼器一個。建議做好原件命名,因爲之後會涉及到蠻多的交互,清晰的命名可以避免出現混亂。

10612070-4a0c30cef6aa3f7f.jpg
然後我們需要對中繼器做一些處理,點擊中繼器,右側它的屬性頁,可以把三個行都刪除,然後雙擊中繼器進入中繼器編輯頁面。

按照表格每一列的名稱在中繼器內放入6個矩形框,做好元件命名。

10612070-729024c558b286e5.jpg

10612070-29e44a12426725bf.jpg

現在是這個樣子的。

2 數據添加功能

準備工作完成,然後我們需要爲中繼器添加一下動作,中繼器屬性面板選擇每項載入時,當打開網頁或者添加數據時候,爲中繼器加載數據集到元件。

10612070-2ceb1380590250e8.jpg
特別注意的是,爲了實現編號自增,編號的動作設置爲[[item.index]]

中繼器屬性面板爲中繼器數據集添加列,也可以手動添加一行數據,如果是7.0的版本你的中繼器數據集應該再頁面下方,8.0整合到右側

10612070-961ce1b2ec0e170c.jpg
之後需要爲添加按鈕配置點擊動作,爲中繼器“添加行”

10612070-c010f58b580e379d.jpg
點擊下方的 添加行 ,把輸入框和中繼器數據集綁定起來:

10612070-9dce7cd49ec0edce.jpg

10612070-aebb589d6e992c22.jpg

到此,添加功能已經完成。

3 單行選擇+刪除行

進入中繼器頁面,選中6個矩形框,設置選中的動作—填充顏色

10612070-26f58ac6b20fd09d.jpg
同樣是選中6個矩形框的狀態,按 ctrl+g,將6個矩形設爲選項組,別忘了添加一個選項組名稱(很重要),添加鼠標點擊動作,

10612070-8eb7be77405a6e54.jpg
標記行是稍後的刪除動作需要用到的,現在已經可以選擇行,但是沒有單選效果,回到中繼器屬性

10612070-54752532a005c0e2.jpg
中間的勾去掉即可。

下面爲“刪除行”按鈕配置動作

10612070-d884d11263ff268a.jpg
此處非常簡單,只需要爲中繼器刪除行選擇已標記即可,我們上一步標記行的意義就在於此。

4 修改行

點擊修改按鈕,改行變爲可編輯狀態,同時修改按鈕變成保存按鈕,點擊保存之後保存修改後的數據。

中繼器修改框拖入兩個文本矩形,一個修改(xiugai)一個保存(baocun),默認保存文本爲隱藏狀態。

Xingming、xingbie、zhiwei、youxiang四個矩形框分別拖入一個文本輸入框,命名爲”xiugai-xingming、xiugai-xingbie、xiugai-zhiwei、xiugai-youxiang“去掉邊框設爲隱藏狀態。

10612070-156c630de6547741.jpg
然後爲修改按鈕配置動作:

10612070-b185ddcb6b40690b.jpg
點擊修改按鈕,顯示隱藏文本輸入框,同時文本輸入框獲取當前行的值。

10612070-b93ee6ff5e87eade.jpg
然後爲保存按鈕配置動作,點擊保存時中繼器更新行,同時中繼器數據集應該設置爲剛剛的隱藏文本框,這裏與之前添加按鈕的配置基本一樣

10612070-1b1a1fe751e538a2.jpg
至此,一個簡單的利用中繼器增刪改的原型設計完成。

但是在預覽原型的時候會發現一些問題:

添加數據的時候性別不選擇,或者輸入爲空也可以添加成功,修改行的時候也有同樣的問題,而且性別的位置可以隨意輸入沒有任何限制。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章