AXURE9實(shí)現(xiàn)表單的增刪改查
編輯導(dǎo)讀:表單的增刪改查是最日常不過(guò)的操作了,每個(gè)產(chǎn)品經(jīng)理在制作原型的時(shí)候都要考慮的部分。本文作者基于自身工作經(jīng)驗(yàn),將從功能需求和功能實(shí)現(xiàn)兩個(gè)方面,對(duì)AXURE9如何實(shí)現(xiàn)表單的增刪改查進(jìn)行分析,希望對(duì)你有幫助。
交互效果原型連接:https://gwne63.axshare.com
使用中繼器實(shí)現(xiàn)表單的增刪改查翻頁(yè)功能,示例如下圖所示:
一、功能需求分析
- 新增:在學(xué)號(hào)、姓名、成績(jī)、班級(jí)中輸入相應(yīng)內(nèi)容,點(diǎn)擊“新增”則在表單中新增一行;
- 刪除:選中某行前面的復(fù)選框,點(diǎn)擊刪除,則該行從表單中刪除,全選后點(diǎn)擊刪除,則所有行刪除;
- 編輯:選中某行,在輸入框中輸入相應(yīng)內(nèi)容,點(diǎn)擊編輯則改行內(nèi)容被新內(nèi)容替換;
- 查詢:輸入學(xué)號(hào)或姓名,點(diǎn)擊查詢,則將符合條件的行數(shù)篩選顯示出來(lái);
- 向左雙箭頭,表示“前一頁(yè)”;
- 向左單箭頭,表示“首頁(yè)”;
- 向右雙箭頭,表示“后一頁(yè)”;
- 向右單箭頭,表示“尾頁(yè)”;
- 雙箭頭中間矩形框,表示“當(dāng)前數(shù)據(jù)行/總數(shù)據(jù)行”;
- 向右單箭頭的右邊矩形框,表示“共多少條數(shù)據(jù)”。
二、功能實(shí)現(xiàn)
添加中繼器:拖動(dòng)中繼器元件,到編輯器,并命名為list;
雙擊中繼器,并按ctrl+C將中繼器列數(shù)擴(kuò)展為5列,并將每列分布命名為ID,Name,Grade,Clase;
在樣式中,選擇“可見(jiàn)性”可將第二步驟中復(fù)制的框外線進(jìn)行去除;
放入復(fù)選框;
在樣式中,將中繼器各列進(jìn)行命名,并進(jìn)行內(nèi)容錄入;
List中繼器交互設(shè)計(jì),將中繼器與內(nèi)容進(jìn)行關(guān)聯(lián),如下:
對(duì)中繼器內(nèi)的復(fù)選框添加案例:選中時(shí)-標(biāo)記行(list的當(dāng)前行);
對(duì)中繼器增加表頭。(注:是在中繼器表單以外增加矩形元件即可),以及在第一個(gè)矩形框中增加一個(gè)復(fù)選框,命名為“全選”;
對(duì)表頭“全選”復(fù)選框交互如下:
設(shè)置“向左單箭頭”如下:
設(shè)置“向左雙箭頭箭頭”如下:
設(shè)置“向右單箭頭箭頭”如下:
設(shè)置“向右雙箭頭箭頭”如下:
使用“文本框”元件分別輸入學(xué)號(hào)(input_ID)、成績(jī)(Input_Grade)、姓名(input_name)、班級(jí)(Input_Class),并組合為input;
添加“新增”、“刪除”、“編輯”、“查詢”按鈕;
新增交互:
刪除交互:
編輯交互:
查詢交互:
[[(Item.ID.indexOf(LVAR1)+Item.Name.indexOf(LVAR2))>-2]]
分頁(yè)顯示:
總頁(yè)顯示:
作者:心修黑白;微信公眾號(hào):于小魯
本文由 @心修黑白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
為什么總頁(yè)顯示的時(shí)候我選不到list,求老師解答