【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上面
【Axure8】利用中继器(Repeater)实现表格数据的增删改的更多相关文章
- vue实现对表格数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
- 利用PHP连接数据库——实现用户数据的增删改查的整体操作实例
main页面(主页面) <table width="100%" border="1" cellpadding="0" cellspac ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
- 基于vue-easytable实现数据的增删改查
基于vue-easytable实现数据的增删改查 原理:利用vue的数据绑定和vue-easetable的ui完成增删改查 后端接口: 1.条件查询表中数据 http://localhost:4795 ...
- MVC模式:实现数据库中数据的增删改查功能
*.数据库连接池c3p0,连接mysql数据库: *.Jquery使用,删除时跳出框,确定是否要删除: *.使用EL和JSTL,简化在jsp页面中插入的java语言 1.连接数据库 (1)导入连接数据 ...
- Thinkphp---练习:数据的增删改查
利用ThinkPHP连接数据库的增删改查的例题:用到的数据库表名Info表,Nation表 数据显示页面:MainController.class.php中的方法(增删改查全包括--function ...
- smarty练习:数据的增删改
根据数据库中的三张表格:timu,xuanxiang,kemu来进行数据的增删改查,并且使用smarty模版将前端与后台分离开来 三张表格: 主页面后台 main.php: <?php //引入 ...
- vue实现对数据的增删改查(CURD)
vue实现对数据的增删改查(CURD) 导语: 网上看到一个写的比较好的学习文章,转载分享一下 在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的 ...
- vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
随机推荐
- 叉积_判断点与三角形的位置关系 P1355 神秘大三角
题目描述 判断一个点与已知三角形的位置关系. 输入输出格式 输入格式: 前三行:每行一个坐标,表示该三角形的三个顶点 第四行:一个点的坐标,试判断该点与前三个点围成三角形的位置关系 (详见样例) 所有 ...
- Parse发布Bolts,一个面向iOS和Android的底层库集合
转载自:http://www.infoq.com/cn/news/2014/02/parse-announces-bolts 数月前,Parse被Facebook收购.最近,它开源了一个面向iOS和A ...
- UML图中时序图的基本用法
快速阅读 序列图主要用来更直观的表现各个对象交互的时间顺序,将体现的重点放在 以时间为参照,各个对象发送.接收消息,处理消息,返回消息的 时间流程顺序,也称为时序图. 里面用到的基本元素如下: 角色- ...
- ubuntu18.04 qemu环境搭建【学习笔记】
一.准备工具 1.1 安装相关工具 sudo apt-get install qemu libncurses5-dev gcc-arm-linux-gnueabi build-essential 1. ...
- storcli64和smartctl定位硬盘的故障信息
storcli64可对LSIRAID卡基本操作进行管理,本文主要是对LSIRAID卡常使用到的命令进行介绍 https://www.cnblogs.com/wangl-blog/archive/201 ...
- Shell Script 入门教程
和 Shell 的区别 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁. Shell 即是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提 ...
- openresty开发系列4--nginx的配置文件说明
openresty开发系列4--nginx的配置文件说明 Nginx基本配置 Nginx的主配置文件是:nginx.conf,nginx.conf主要组成如下: # 全局区 有一个工作子进程,一般 ...
- org.openqa.selenium.WebDriverException: unknown error: call function result missing 'value'
原因:浏览器和驱动版本不匹配 https://npm.taobao.org/mirrors/chromedriver
- Python3基础 变量命名 区分大小写
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- stringstream用法
stringstream用法 1.头文件:#include<sstream> 2.stringstream是C++提供的串流(stream)物件,其中: clear()重置流的标志状态:s ...