利用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上面