Axure8.0教程:利用中繼器對表格的增刪改操作

64 評論 198732 瀏覽 215 收藏 8 分鐘

一直都是只看不發的那種,運用axure制作原型也有很長一段時間了,最近升級到8.0,用起來各種順手啊,就寫了一個中繼器的教程,供新手學習。

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

添加

刪除

修改

1 開工前的原件準備工作

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

1

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

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

2

3

現在是這個樣子的。

2 數據添加功能

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

4

特別注意的是,為了實現編號自增,編號的動作設置為[[item.index]]

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

5

之后需要為添加按鈕配置點擊動作,為中繼器“添加行”

6

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

7

8

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

3 單行選擇+刪除行

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

9

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

10

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

11

中間的勾去掉即可。

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

12

此處非常簡單,只需要為中繼器刪除行選擇已標記即可,我們上一步標記行的意義就在于此。

4 修改行

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

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

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

13

然后為修改按鈕配置動作:

14

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

15

然后為保存按鈕配置動作,點擊保存時中繼器更新行,同時中繼器數據集應該設置為剛剛的隱藏文本框,這里與之前添加按鈕的配置基本一樣

16

至此,一個簡單的利用中繼器增刪改的原型設計完成。

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

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

我上傳的原型中是有一些限制的,這里就不放出具體教程了,有不明白的可以咨詢。頭一次寫,會有一些不清晰的地方,歡迎建議指正!

rp文件地址:http://pan.baidu.com/s/1pL2dW63

 

本文由 @零零 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 你好,能加個聯系方式,請教一下么,我照著做了一遍,并沒有西效果,并且也沒明白里面的邏輯。

    來自湖北 回復
  2. 很有用,謝謝

    來自湖南 回復
  3. 下拉框我添加數據的時候沒有數據是為什么?。?/p>

    來自北京 回復
  4. 樓主可以把刪除行那塊給詳解一下嗎?

    來自浙江 回復
  5. 中繼器刪除行選擇已標記之后確實會刪掉一行,但是剩下的行就直接變成沒數據了是為啥呢 ??

    來自北京 回復
  6. 麻煩問一下,怎么實現每次只刪除一行呢?就是每次只能選中一行,點其他行,之前被選中的就會取消選中

    來自北京 回復
  7. 一個小建議 選中狀態改成toggle更好一點 這樣可以取消選中

    來自浙江 回復
  8. 不錯,寫的很好,我會了,那些條件自己可以加上

    回復
  9. 非常感謝你的分享,不過試了你的案例之后發現,你的案例中如果直接點擊“添加”會提示添加有誤,這不是應有的效果吧?我現在嘗試了集中添加數據的方法均無法添加上呢

    來自上海 回復
  10. 遇到了一個問題,在選中一行點擊刪除按鈕刪除后,鼠標移動過表格,會出現選中狀態(單格)

    來自廣東 回復
    1. 你表格設置的有鼠標移入選中效果吧?

      來自河南 回復
  11. 添加圖片到中繼器,圖片不顯示,怎么處理呢

    來自北京 回復
    1. 你變量設置出問題了

      來自河南 回復
  12. 為什么修改時什么都不改,點擊保存框里都變成空白了

    來自廣東 回復
    1. 應該是設置顯示與隱藏的問題

      來自北京 回復
  13. 我想問一下,你是如何整個設置選項組名字的,但是每個矩形框又不在選項組里面的,因為設置選項組之后,只會默認選中一個

    來自北京 回復
    1. 我的問題和你的一樣,設置選項組合后,但依然只會選中一個

      來自湖南 回復
    2. 選中你需要設置為選項組的元件(一般是多個相同元件,大多用于tab切換),然后打開右側屬性面板,隨便寫個選項組名稱就可以!

      來自四川 回復
    3. 注意看有兩個選項組命名,第一個是組合整體命名,第二是是分元件(你說的矩形框)命名。只填第一個,第二個不能填,否則該選項組元件間單選生效,就會出現你說的選中時只能選中一個矩形框,而不是整行

      來自山東 回復
    4. 選項組命名是有兩個地方可以填的,第一個是組合整體命名,第二是是分元件(你說的矩形框)命名。只填第一個,第二個不能填,否則該選項組元件間單選生效,就會出現你說的只能選中一個矩形框,而不是整行的情況。

      來自山東 回復
  14. 請問樓主,我在輸入框中輸入相關信息后,點擊【添加】按鈕,新增行中沒有出現之前所填寫的信息,而是顯示[[item.xingming]]等這樣的內容,是我在設置的時候有什么錯誤嗎,求告知,謝謝~

    來自北京 回復
    1. 應該變量沒設置好,看一下,符號什么的

      來自上海 回復
    2. [[item.xingming]]這是獲取的之前的輸入的內容,需要一個局部變量,不是直接輸入樓主這個就ok的。。。。。

      來自上海 回復
    3. 這個情況我也出現過,還沒搞定的話,可以私聊;qq:703794241

      來自廣東 回復
  15. 不錯,我這邊有個問題,我做好了之后,點擊修改不知道為什么之前的姓名什么的信息沒有清空,是怎么回事?

    來自上海 回復
  16. 沒學會呀

    來自北京 回復
  17. 說好的分頁呢

    來自湖南 回復
  18. 我添加一行后,中繼器中所有的列表項都變成原始的頁面了,搞不懂怎么回事

    來自江蘇 回復
  19. 按樓主的方法,取消了中繼器屬性中“隔離選項組效果”的勾,依然沒有實現單選的效果,請問是什么原因?

    來自浙江 回復
    1. 請問解決了嗎

      來自北京 回復
  20. 再求教樓主一個問題:中繼器的某一列的數求和相加, 怎么實現?

    來自北京 回復
  21. 求教樓主:我使用中繼器的“設置當前頁”功能時,點擊按鈕設置成到中繼器的“下一個”or“上一個”,前臺頁面顯示都不生效不跳轉。但是設置成到中繼器的“last”或者賦值value到某一頁,前臺點擊效果是生效(成功跳轉)的。是因為什么呢?我用的Axure8.0(3312版),漢化了。

    來自北京 回復
    1. 已解決,軟件版本問題

      來自北京 回復
  22. 我做出來有點小問題,樓主能指教一下么?添加刪除模塊都沒有問題,但是點擊修改按鈕之后,文本輸入框中的文字和中繼器中的文字都同時出現在同一表格中,源文件我也下載了,看著沒啥問題。樓主能指教一下么??

    來自北京 回復
  23. 感謝分享,學習了

    來自四川 回復
    1. 你回了?

      來自北京 回復
  24. 終于有點搞懂這玩意兒了~感謝作者啊~特別詳細特別贊

    來自江蘇 回復
  25. 又學會一點。。。。

    回復
  26. 有個問題,選中某一行之后,再選中其他行 雖然這一行沒有標記背景填充 但是刪除時也會被刪掉

    來自北京 回復
    1. 這個問題我也發現了,新手找了好久終于解決:因為作者在設置選項組group(即6個矩形組合成的組)的click時間時,每次點擊都會對該行進行標記,而刪除時,刪除所有被標記的行,這樣就會刪除所有被單擊過的行,解決辦法是在設置標記事件前,先unmark所有行,但一定要注意事件先后順序,先unmark all 再mark this

      來自福建 回復
    2. 我是這樣設置之后還是會都刪除

      來自北京 回復
    3. 我已經好了

      來自北京 回復
  27. 你這個刪除時的成組和選項組,搞錯了吧!選項組一般都是用來單選,而你那里是選擇整行 ?

    來自江蘇 回復
    1. 看下rp文件,對照再看文章。

      來自上海 回復
  28. 性別框的值是如何實現傳遞的呢?我看你RP里面直接使用了[[item.xingbie]],但是沒有定義局部變量

    來自四川 回復
    1. 看添加按鈕的case2,中繼器”xingbie“框已經和輸入的”性別下拉框“進行了數據傳遞,[[item.xingbie]]直接獲取中繼器當前框的值

      來自上海 回復
    2. 是case1

      來自上海 回復
    3. 添加按鈕的case1是添加行1為(中繼器),還是不太明白如何實現值傳遞的。我指的傳遞是,在上方文本框選擇了性別的某一項,下方中繼器在獲取上方文本框文字的時候,性別這一項是無法使用設置文字于這個操作的,因為設置文字于的時候,沒有下拉列表框這個選項。所以不太明白你是如何將上方下拉列表框中的值傳遞到中繼器中的。

      來自四川 回復
    4. 看”添加”按鈕的: case1——添加行1為(中繼器)——配置動作框下方的添加行——看下xingbie的值——局部變量,這里就是中繼器xingbie框和輸入的性別下拉框實現傳遞的地方。

      來自上海 回復
    5. 好的,多謝,明白了

      來自四川 回復
  29. 很好,能不能提供原型原文件(.RP)下載

    來自湖北 回復
    1. 文章最下,有網盤地址

      來自上海 回復
    2. 網盤地址打不開了哇

      來自上海 回復
    3. 郵箱我發你吧

      來自上海 回復
    4. 非常感謝! ??

      來自湖北 回復