Axure8.0教程:利用中繼器對表格的增刪改操作
一直都是只看不發(fā)的那種,運(yùn)用axure制作原型也有很長一段時間了,最近升級到8.0,用起來各種順手啊,就寫了一個中繼器的教程,供新手學(xué)習(xí)。
原型主要是通過中繼器實(shí)現(xiàn)表格的增刪改操作,示例如下:
1 開工前的原件準(zhǔn)備工作
文本框矩形框數(shù)個、下拉框一個、按鈕兩個、中繼器一個。建議做好原件命名,因?yàn)橹髸婕暗叫U多的交互,清晰的命名可以避免出現(xiàn)混亂。
然后我們需要對中繼器做一些處理,點(diǎn)擊中繼器,右側(cè)它的屬性頁,可以把三個行都刪除,然后雙擊中繼器進(jìn)入中繼器編輯頁面。
按照表格每一列的名稱在中繼器內(nèi)放入6個矩形框,做好元件命名。
現(xiàn)在是這個樣子的。
2 數(shù)據(jù)添加功能
準(zhǔn)備工作完成,然后我們需要為中繼器添加一下動作,中繼器屬性面板選擇每項(xiàng)載入時,當(dāng)打開網(wǎng)頁或者添加數(shù)據(jù)時候,為中繼器加載數(shù)據(jù)集到元件。
特別注意的是,為了實(shí)現(xiàn)編號自增,編號的動作設(shè)置為[[item.index]]
中繼器屬性面板為中繼器數(shù)據(jù)集添加列,也可以手動添加一行數(shù)據(jù),如果是7.0的版本你的中繼器數(shù)據(jù)集應(yīng)該再頁面下方,8.0整合到右側(cè)
之后需要為添加按鈕配置點(diǎn)擊動作,為中繼器“添加行”
點(diǎn)擊下方的 添加行 ,把輸入框和中繼器數(shù)據(jù)集綁定起來:
到此,添加功能已經(jīng)完成。
3 單行選擇+刪除行
進(jìn)入中繼器頁面,選中6個矩形框,設(shè)置選中的動作—填充顏色
同樣是選中6個矩形框的狀態(tài),按 ctrl+g,將6個矩形設(shè)為選項(xiàng)組,別忘了添加一個選項(xiàng)組名稱(很重要),添加鼠標(biāo)點(diǎn)擊動作,
標(biāo)記行是稍后的刪除動作需要用到的,現(xiàn)在已經(jīng)可以選擇行,但是沒有單選效果,回到中繼器屬性
中間的勾去掉即可。
下面為“刪除行”按鈕配置動作
此處非常簡單,只需要為中繼器刪除行選擇已標(biāo)記即可,我們上一步標(biāo)記行的意義就在于此。
4 修改行
點(diǎn)擊修改按鈕,改行變?yōu)榭删庉嫚顟B(tài),同時修改按鈕變成保存按鈕,點(diǎn)擊保存之后保存修改后的數(shù)據(jù)。
中繼器修改框拖入兩個文本矩形,一個修改(xiugai)一個保存(baocun),默認(rèn)保存文本為隱藏狀態(tài)。
Xingming、xingbie、zhiwei、youxiang四個矩形框分別拖入一個文本輸入框,命名為”xiugai-xingming、xiugai-xingbie、xiugai-zhiwei、xiugai-youxiang“去掉邊框設(shè)為隱藏狀態(tài)。
然后為修改按鈕配置動作:
點(diǎn)擊修改按鈕,顯示隱藏文本輸入框,同時文本輸入框獲取當(dāng)前行的值。
然后為保存按鈕配置動作,點(diǎn)擊保存時中繼器更新行,同時中繼器數(shù)據(jù)集應(yīng)該設(shè)置為剛剛的隱藏文本框,這里與之前添加按鈕的配置基本一樣
至此,一個簡單的利用中繼器增刪改的原型設(shè)計(jì)完成。
但是在預(yù)覽原型的時候會發(fā)現(xiàn)一些問題:
添加數(shù)據(jù)的時候性別不選擇,或者輸入為空也可以添加成功,修改行的時候也有同樣的問題,而且性別的位置可以隨意輸入沒有任何限制。
我上傳的原型中是有一些限制的,這里就不放出具體教程了,有不明白的可以咨詢。頭一次寫,會有一些不清晰的地方,歡迎建議指正!
rp文件地址:http://pan.baidu.com/s/1pL2dW63
本文由 @零零 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
你好,能加個聯(lián)系方式,請教一下么,我照著做了一遍,并沒有西效果,并且也沒明白里面的邏輯。
很有用,謝謝
下拉框我添加數(shù)據(jù)的時候沒有數(shù)據(jù)是為什么?。?/p>
樓主可以把刪除行那塊給詳解一下嗎?
很好,能不能提供原型原文件(.RP)下載
我按照作者的做好了,你給郵箱我發(fā)給你
可以給我發(fā)一下原件嗎?我對刪除行那塊不是很理解。17612911412@163.com
您好,我也需要一個rp文件,能麻煩發(fā)我一下么。謝謝了 303175059@qq.com
我也想要,358899583@qq.com
謝謝
能給我發(fā)一下原件么?18733235465@163.com,謝謝
可以給我發(fā)一下原件嗎?970173100@qq.com
你好,方便發(fā)我一份嗎?326673818@qq.com。感謝??!
中繼器刪除行選擇已標(biāo)記之后確實(shí)會刪掉一行,但是剩下的行就直接變成沒數(shù)據(jù)了是為啥呢 ??
麻煩問一下,怎么實(shí)現(xiàn)每次只刪除一行呢?就是每次只能選中一行,點(diǎn)其他行,之前被選中的就會取消選中
一個小建議 選中狀態(tài)改成toggle更好一點(diǎn) 這樣可以取消選中
不錯,寫的很好,我會了,那些條件自己可以加上
非常感謝你的分享,不過試了你的案例之后發(fā)現(xiàn),你的案例中如果直接點(diǎn)擊“添加”會提示添加有誤,這不是應(yīng)有的效果吧?我現(xiàn)在嘗試了集中添加數(shù)據(jù)的方法均無法添加上呢
遇到了一個問題,在選中一行點(diǎn)擊刪除按鈕刪除后,鼠標(biāo)移動過表格,會出現(xiàn)選中狀態(tài)(單格)
你表格設(shè)置的有鼠標(biāo)移入選中效果吧?
添加圖片到中繼器,圖片不顯示,怎么處理呢
你變量設(shè)置出問題了
為什么修改時什么都不改,點(diǎn)擊保存框里都變成空白了
應(yīng)該是設(shè)置顯示與隱藏的問題
我想問一下,你是如何整個設(shè)置選項(xiàng)組名字的,但是每個矩形框又不在選項(xiàng)組里面的,因?yàn)樵O(shè)置選項(xiàng)組之后,只會默認(rèn)選中一個
我的問題和你的一樣,設(shè)置選項(xiàng)組合后,但依然只會選中一個
選中你需要設(shè)置為選項(xiàng)組的元件(一般是多個相同元件,大多用于tab切換),然后打開右側(cè)屬性面板,隨便寫個選項(xiàng)組名稱就可以!
注意看有兩個選項(xiàng)組命名,第一個是組合整體命名,第二是是分元件(你說的矩形框)命名。只填第一個,第二個不能填,否則該選項(xiàng)組元件間單選生效,就會出現(xiàn)你說的選中時只能選中一個矩形框,而不是整行
選項(xiàng)組命名是有兩個地方可以填的,第一個是組合整體命名,第二是是分元件(你說的矩形框)命名。只填第一個,第二個不能填,否則該選項(xiàng)組元件間單選生效,就會出現(xiàn)你說的只能選中一個矩形框,而不是整行的情況。
請問樓主,我在輸入框中輸入相關(guān)信息后,點(diǎn)擊【添加】按鈕,新增行中沒有出現(xiàn)之前所填寫的信息,而是顯示[[item.xingming]]等這樣的內(nèi)容,是我在設(shè)置的時候有什么錯誤嗎,求告知,謝謝~
應(yīng)該變量沒設(shè)置好,看一下,符號什么的
[[item.xingming]]這是獲取的之前的輸入的內(nèi)容,需要一個局部變量,不是直接輸入樓主這個就ok的。。。。。
這個情況我也出現(xiàn)過,還沒搞定的話,可以私聊;qq:703794241
不錯,我這邊有個問題,我做好了之后,點(diǎn)擊修改不知道為什么之前的姓名什么的信息沒有清空,是怎么回事?
沒學(xué)會呀
說好的分頁呢
我添加一行后,中繼器中所有的列表項(xiàng)都變成原始的頁面了,搞不懂怎么回事
按樓主的方法,取消了中繼器屬性中“隔離選項(xiàng)組效果”的勾,依然沒有實(shí)現(xiàn)單選的效果,請問是什么原因?
請問解決了嗎
再求教樓主一個問題:中繼器的某一列的數(shù)求和相加, 怎么實(shí)現(xiàn)?
求教樓主:我使用中繼器的“設(shè)置當(dāng)前頁”功能時,點(diǎn)擊按鈕設(shè)置成到中繼器的“下一個”or“上一個”,前臺頁面顯示都不生效不跳轉(zhuǎn)。但是設(shè)置成到中繼器的“l(fā)ast”或者賦值value到某一頁,前臺點(diǎn)擊效果是生效(成功跳轉(zhuǎn))的。是因?yàn)槭裁茨兀课矣玫腁xure8.0(3312版),漢化了。
已解決,軟件版本問題
我做出來有點(diǎn)小問題,樓主能指教一下么?添加刪除模塊都沒有問題,但是點(diǎn)擊修改按鈕之后,文本輸入框中的文字和中繼器中的文字都同時出現(xiàn)在同一表格中,源文件我也下載了,看著沒啥問題。樓主能指教一下么??
感謝分享,學(xué)習(xí)了
你回了?
終于有點(diǎn)搞懂這玩意兒了~感謝作者啊~特別詳細(xì)特別贊
又學(xué)會一點(diǎn)。。。。
有個問題,選中某一行之后,再選中其他行 雖然這一行沒有標(biāo)記背景填充 但是刪除時也會被刪掉
這個問題我也發(fā)現(xiàn)了,新手找了好久終于解決:因?yàn)樽髡咴谠O(shè)置選項(xiàng)組group(即6個矩形組合成的組)的click時間時,每次點(diǎn)擊都會對該行進(jìn)行標(biāo)記,而刪除時,刪除所有被標(biāo)記的行,這樣就會刪除所有被單擊過的行,解決辦法是在設(shè)置標(biāo)記事件前,先unmark所有行,但一定要注意事件先后順序,先unmark all 再mark this
我是這樣設(shè)置之后還是會都刪除
我已經(jīng)好了
你這個刪除時的成組和選項(xiàng)組,搞錯了吧!選項(xiàng)組一般都是用來單選,而你那里是選擇整行 ?
看下rp文件,對照再看文章。
性別框的值是如何實(shí)現(xiàn)傳遞的呢?我看你RP里面直接使用了[[item.xingbie]],但是沒有定義局部變量
看添加按鈕的case2,中繼器”xingbie“框已經(jīng)和輸入的”性別下拉框“進(jìn)行了數(shù)據(jù)傳遞,[[item.xingbie]]直接獲取中繼器當(dāng)前框的值
是case1
添加按鈕的case1是添加行1為(中繼器),還是不太明白如何實(shí)現(xiàn)值傳遞的。我指的傳遞是,在上方文本框選擇了性別的某一項(xiàng),下方中繼器在獲取上方文本框文字的時候,性別這一項(xiàng)是無法使用設(shè)置文字于這個操作的,因?yàn)樵O(shè)置文字于的時候,沒有下拉列表框這個選項(xiàng)。所以不太明白你是如何將上方下拉列表框中的值傳遞到中繼器中的。
看”添加”按鈕的: case1——添加行1為(中繼器)——配置動作框下方的添加行——看下xingbie的值——局部變量,這里就是中繼器xingbie框和輸入的性別下拉框?qū)崿F(xiàn)傳遞的地方。
好的,多謝,明白了
很好,能不能提供原型原文件(.RP)下載
文章最下,有網(wǎng)盤地址
網(wǎng)盤地址打不開了哇
郵箱我發(fā)你吧
非常感謝! ??