【Axure8】利用中繼器(Repeater)實現表格數據的增刪改


利用Repeater實現對Table數據的增刪改操作。

先拖入必需的控件:rectangle、text field、droplist、button、table、repeater。具體信息如圖。

為方便后續操作,將幾個text field和droplist分別命名為name、sex、title、email。兩個button分別命名為addbutton、deletebutton。

雙擊repeater控件,進入編輯頁面:

①將repeater內部默認的rectangle刪去,替換成7個text field(因為后續要實現對這里數據的修改功能,需要有text field的內容編輯)

②repeater命名為data,方便后續操作

③對7個text field分別進行命名

點擊右側的data(repeater)——properties,對repeater控件的表格進行修改:

①增加對應姓名、性別、職位、郵箱的column,分別進行命名,方便后續操作

②刪去多余的兩行

③編輯填入一行完整的數據

*此時repeater里並沒有顯示數據

 

 對repeater內部text field控件和表格的數據進行一對一綁定:

①右側data(repeater)——properties——interactions——OnItemLoad——add case,在彈出框中選擇widgets——set text,勾選repeater內部的幾個text field控件,分別進行數據的綁定

②選中需要綁定數據的控件之后,點擊下方set text to里的fx,在彈出框中點擊insert variable or function,選擇相對應的數據,這里對應的是之前在repeater——properties的表格中設置的數據列項。

*這時可以看到repeater中顯示出了填入的數據

 實現數據添加功能:

①設置“添加”按鈕的interactions,選擇OnClick,在彈出框左側選擇repeaters——datasets——add rows,勾選data(repeater)

②點擊下方的add rows綁定具體添加數據,其中number_t的綁定數據為insert variable or function下拉中data(repeater)的index;name_t、title_t、email_t綁定add local variable——text on widget,選擇各自對應的text field;sex_t要選擇selected option of,勾選對應droplist。這一步實現的是數據讀入控件到repeater數據表的綁定。

*這一步完成后,輸入選擇相應數據,點擊添加按鈕,就可以實現數據添加。

 實現數據刪除功能:

①在data(repeater)內部第一個text field中添加一個checkbox控件,設置其Interactions,OnSelected標記數據行,OnUnselected取消標記。

②設置刪除按鈕的interaction,選擇repeater——datasets——delete rows,勾選data(repeater),選擇Marked。

這一步通過checkbox標記需要刪除的數據行,按鈕進行刪除。

 實現數據修改功能:

①在Repeater的operaction_r的text field中增加兩個按鈕:修改和保存,命名為editbutton和savebutton

②Repeater的Interactions增加如下:

③修改按鈕的Interactions編輯如下:

④保存按鈕的Interactions編輯如下:

 

 

 ⑤將editbutton疊放在savebutton上面

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM