首页 技术 正文
技术 2022年11月15日
0 收藏 850 点赞 4,846 浏览 1501 个字

利用Repeater实现对Table数据的增删改操作。

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

为方便后续操作,将几个text field和droplist分别命名为name、sex、title、email。两个button分别命名为addbutton、deletebutton。

【Axure8】利用中继器(Repeater)实现表格数据的增删改

双击repeater控件,进入编辑页面:

①将repeater内部默认的rectangle删去,替换成7个text field(因为后续要实现对这里数据的修改功能,需要有text field的内容编辑)

②repeater命名为data,方便后续操作

③对7个text field分别进行命名

【Axure8】利用中继器(Repeater)实现表格数据的增删改

点击右侧的data(repeater)——properties,对repeater控件的表格进行修改:

①增加对应姓名、性别、职位、邮箱的column,分别进行命名,方便后续操作

②删去多余的两行

③编辑填入一行完整的数据

*此时repeater里并没有显示数据

【Axure8】利用中继器(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中显示出了填入的数据

【Axure8】利用中继器(Repeater)实现表格数据的增删改

【Axure8】利用中继器(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数据表的绑定。

*这一步完成后,输入选择相应数据,点击添加按钮,就可以实现数据添加。

【Axure8】利用中继器(Repeater)实现表格数据的增删改

实现数据删除功能:

①在data(repeater)内部第一个text field中添加一个checkbox控件,设置其Interactions,OnSelected标记数据行,OnUnselected取消标记。

【Axure8】利用中继器(Repeater)实现表格数据的增删改

②设置删除按钮的interaction,选择repeater——datasets——delete rows,勾选data(repeater),选择Marked。

这一步通过checkbox标记需要删除的数据行,按钮进行删除。

【Axure8】利用中继器(Repeater)实现表格数据的增删改

实现数据修改功能:

①在Repeater的operaction_r的text field中增加两个按钮:修改和保存,命名为editbutton和savebutton

②Repeater的Interactions增加如下:

【Axure8】利用中继器(Repeater)实现表格数据的增删改

③修改按钮的Interactions编辑如下:

【Axure8】利用中继器(Repeater)实现表格数据的增删改

④保存按钮的Interactions编辑如下:

【Axure8】利用中继器(Repeater)实现表格数据的增删改

⑤将editbutton叠放在savebutton上面

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,083
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,558
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,407
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,180
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,817
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,899