利用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)实现表格数据的增删改的更多相关文章

  1. vue实现对表格数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

  2. 利用PHP连接数据库——实现用户数据的增删改查的整体操作实例

    main页面(主页面) <table width="100%" border="1" cellpadding="0" cellspac ...

  3. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  4. 基于vue-easytable实现数据的增删改查

    基于vue-easytable实现数据的增删改查 原理:利用vue的数据绑定和vue-easetable的ui完成增删改查 后端接口: 1.条件查询表中数据 http://localhost:4795 ...

  5. MVC模式:实现数据库中数据的增删改查功能

    *.数据库连接池c3p0,连接mysql数据库: *.Jquery使用,删除时跳出框,确定是否要删除: *.使用EL和JSTL,简化在jsp页面中插入的java语言 1.连接数据库 (1)导入连接数据 ...

  6. Thinkphp---练习:数据的增删改查

    利用ThinkPHP连接数据库的增删改查的例题:用到的数据库表名Info表,Nation表 数据显示页面:MainController.class.php中的方法(增删改查全包括--function ...

  7. smarty练习:数据的增删改

    根据数据库中的三张表格:timu,xuanxiang,kemu来进行数据的增删改查,并且使用smarty模版将前端与后台分离开来 三张表格: 主页面后台 main.php: <?php //引入 ...

  8. vue实现对数据的增删改查(CURD)

    vue实现对数据的增删改查(CURD) 导语: 网上看到一个写的比较好的学习文章,转载分享一下 在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的 ...

  9. vue实现数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

随机推荐

  1. 叉积_判断点与三角形的位置关系 P1355 神秘大三角

    题目描述 判断一个点与已知三角形的位置关系. 输入输出格式 输入格式: 前三行:每行一个坐标,表示该三角形的三个顶点 第四行:一个点的坐标,试判断该点与前三个点围成三角形的位置关系 (详见样例) 所有 ...

  2. Parse发布Bolts,一个面向iOS和Android的底层库集合

    转载自:http://www.infoq.com/cn/news/2014/02/parse-announces-bolts 数月前,Parse被Facebook收购.最近,它开源了一个面向iOS和A ...

  3. UML图中时序图的基本用法

    快速阅读 序列图主要用来更直观的表现各个对象交互的时间顺序,将体现的重点放在 以时间为参照,各个对象发送.接收消息,处理消息,返回消息的 时间流程顺序,也称为时序图. 里面用到的基本元素如下: 角色- ...

  4. ubuntu18.04 qemu环境搭建【学习笔记】

    一.准备工具 1.1 安装相关工具 sudo apt-get install qemu libncurses5-dev gcc-arm-linux-gnueabi build-essential 1. ...

  5. storcli64和smartctl定位硬盘的故障信息

    storcli64可对LSIRAID卡基本操作进行管理,本文主要是对LSIRAID卡常使用到的命令进行介绍 https://www.cnblogs.com/wangl-blog/archive/201 ...

  6. Shell Script 入门教程

    和 Shell 的区别 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁. Shell 即是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提 ...

  7. openresty开发系列4--nginx的配置文件说明

    openresty开发系列4--nginx的配置文件说明 Nginx基本配置 Nginx的主配置文件是:nginx.conf,nginx.conf主要组成如下: # 全局区   有一个工作子进程,一般 ...

  8. org.openqa.selenium.WebDriverException: unknown error: call function result missing 'value'

    原因:浏览器和驱动版本不匹配 https://npm.taobao.org/mirrors/chromedriver

  9. Python3基础 变量命名 区分大小写

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  10. stringstream用法

    stringstream用法 1.头文件:#include<sstream> 2.stringstream是C++提供的串流(stream)物件,其中: clear()重置流的标志状态:s ...