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
本文由 @零零 原創發布于人人都是產品經理。未經許可,禁止轉載。
你好,能加個聯系方式,請教一下么,我照著做了一遍,并沒有西效果,并且也沒明白里面的邏輯。
很有用,謝謝
下拉框我添加數據的時候沒有數據是為什么?。?/p>
樓主可以把刪除行那塊給詳解一下嗎?
很好,能不能提供原型原文件(.RP)下載
我按照作者的做好了,你給郵箱我發給你
可以給我發一下原件嗎?我對刪除行那塊不是很理解。17612911412@163.com
您好,我也需要一個rp文件,能麻煩發我一下么。謝謝了 303175059@qq.com
我也想要,358899583@qq.com
謝謝
能給我發一下原件么?18733235465@163.com,謝謝
可以給我發一下原件嗎?970173100@qq.com
你好,方便發我一份嗎?326673818@qq.com。感謝??!
中繼器刪除行選擇已標記之后確實會刪掉一行,但是剩下的行就直接變成沒數據了是為啥呢 ??
麻煩問一下,怎么實現每次只刪除一行呢?就是每次只能選中一行,點其他行,之前被選中的就會取消選中
一個小建議 選中狀態改成toggle更好一點 這樣可以取消選中
不錯,寫的很好,我會了,那些條件自己可以加上
非常感謝你的分享,不過試了你的案例之后發現,你的案例中如果直接點擊“添加”會提示添加有誤,這不是應有的效果吧?我現在嘗試了集中添加數據的方法均無法添加上呢
遇到了一個問題,在選中一行點擊刪除按鈕刪除后,鼠標移動過表格,會出現選中狀態(單格)
你表格設置的有鼠標移入選中效果吧?
添加圖片到中繼器,圖片不顯示,怎么處理呢
你變量設置出問題了
為什么修改時什么都不改,點擊保存框里都變成空白了
應該是設置顯示與隱藏的問題
我想問一下,你是如何整個設置選項組名字的,但是每個矩形框又不在選項組里面的,因為設置選項組之后,只會默認選中一個
我的問題和你的一樣,設置選項組合后,但依然只會選中一個
選中你需要設置為選項組的元件(一般是多個相同元件,大多用于tab切換),然后打開右側屬性面板,隨便寫個選項組名稱就可以!
注意看有兩個選項組命名,第一個是組合整體命名,第二是是分元件(你說的矩形框)命名。只填第一個,第二個不能填,否則該選項組元件間單選生效,就會出現你說的選中時只能選中一個矩形框,而不是整行
選項組命名是有兩個地方可以填的,第一個是組合整體命名,第二是是分元件(你說的矩形框)命名。只填第一個,第二個不能填,否則該選項組元件間單選生效,就會出現你說的只能選中一個矩形框,而不是整行的情況。
請問樓主,我在輸入框中輸入相關信息后,點擊【添加】按鈕,新增行中沒有出現之前所填寫的信息,而是顯示[[item.xingming]]等這樣的內容,是我在設置的時候有什么錯誤嗎,求告知,謝謝~
應該變量沒設置好,看一下,符號什么的
[[item.xingming]]這是獲取的之前的輸入的內容,需要一個局部變量,不是直接輸入樓主這個就ok的。。。。。
這個情況我也出現過,還沒搞定的話,可以私聊;qq:703794241
不錯,我這邊有個問題,我做好了之后,點擊修改不知道為什么之前的姓名什么的信息沒有清空,是怎么回事?
沒學會呀
說好的分頁呢
我添加一行后,中繼器中所有的列表項都變成原始的頁面了,搞不懂怎么回事
按樓主的方法,取消了中繼器屬性中“隔離選項組效果”的勾,依然沒有實現單選的效果,請問是什么原因?
請問解決了嗎
再求教樓主一個問題:中繼器的某一列的數求和相加, 怎么實現?
求教樓主:我使用中繼器的“設置當前頁”功能時,點擊按鈕設置成到中繼器的“下一個”or“上一個”,前臺頁面顯示都不生效不跳轉。但是設置成到中繼器的“last”或者賦值value到某一頁,前臺點擊效果是生效(成功跳轉)的。是因為什么呢?我用的Axure8.0(3312版),漢化了。
已解決,軟件版本問題
我做出來有點小問題,樓主能指教一下么?添加刪除模塊都沒有問題,但是點擊修改按鈕之后,文本輸入框中的文字和中繼器中的文字都同時出現在同一表格中,源文件我也下載了,看著沒啥問題。樓主能指教一下么??
感謝分享,學習了
你回了?
終于有點搞懂這玩意兒了~感謝作者啊~特別詳細特別贊
又學會一點。。。。
有個問題,選中某一行之后,再選中其他行 雖然這一行沒有標記背景填充 但是刪除時也會被刪掉
這個問題我也發現了,新手找了好久終于解決:因為作者在設置選項組group(即6個矩形組合成的組)的click時間時,每次點擊都會對該行進行標記,而刪除時,刪除所有被標記的行,這樣就會刪除所有被單擊過的行,解決辦法是在設置標記事件前,先unmark所有行,但一定要注意事件先后順序,先unmark all 再mark this
我是這樣設置之后還是會都刪除
我已經好了
你這個刪除時的成組和選項組,搞錯了吧!選項組一般都是用來單選,而你那里是選擇整行 ?
看下rp文件,對照再看文章。
性別框的值是如何實現傳遞的呢?我看你RP里面直接使用了[[item.xingbie]],但是沒有定義局部變量
看添加按鈕的case2,中繼器”xingbie“框已經和輸入的”性別下拉框“進行了數據傳遞,[[item.xingbie]]直接獲取中繼器當前框的值
是case1
添加按鈕的case1是添加行1為(中繼器),還是不太明白如何實現值傳遞的。我指的傳遞是,在上方文本框選擇了性別的某一項,下方中繼器在獲取上方文本框文字的時候,性別這一項是無法使用設置文字于這個操作的,因為設置文字于的時候,沒有下拉列表框這個選項。所以不太明白你是如何將上方下拉列表框中的值傳遞到中繼器中的。
看”添加”按鈕的: case1——添加行1為(中繼器)——配置動作框下方的添加行——看下xingbie的值——局部變量,這里就是中繼器xingbie框和輸入的性別下拉框實現傳遞的地方。
好的,多謝,明白了
很好,能不能提供原型原文件(.RP)下載
文章最下,有網盤地址
網盤地址打不開了哇
郵箱我發你吧
非常感謝! ??