【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上面

原文地址:https://www.cnblogs.com/ssikik/p/11411451.html

时间: 2024-11-07 01:25:01

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

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

main页面(主页面) <table width="100%" border="1" cellpadding="0" cellspacing="0"><tr><td>代号</td><td>姓名</td><td>性别</td><td>民族</td><td>生日</td><td>

利用XML的dom进行数据的增删改查

import java.io.FileOutputStream; import javax.swing.event.DocumentListener; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import javax.xml.transform.T

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

http://www.cnblogs.com/xumengxuan/p/7144580.html 原文地址: https://www.xiabingbao.com/vue/2017/07/10/vue-curd.html

表格数据:增,删,改

利用 Info 表 和 Nation 表,做数据的增删改 //显示所有数据的方法 function ShowInfo() { $model = D("Info"); $attr = $model->field("Info.Code as InfoCode,Info.Name as InfoName,Info.Sex,Nation.Name as NationName,Info.Birthday")->join("Nation on Info.N

JSon实现数据的增删改(简单实例)

利用JSon实现数据的增删改 完成一个密码箱的小程序,功能是选择网站,显示相应的帐号和密码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

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

利用ThinkPHP连接数据库的增删改查的例题:用到的数据库表名Info表,Nation表 数据显示页面:MainController.class.php中的方法(增删改查全包括--function  ShowInfo,ShanChu,TianJia,XiuGai) 1 <?php 2 namespace Home\Controller; 3 use Think\Controller; 4 class MainController extends Controller 5 { 6 7 //例题:

数据的增删改查(三层)

进行数据操作必然少了对数据的增删改查,用代码生成器生成的代码不是那么满意!方便在今后使用,这里就主要写“数据访问层(Dal)” 注:这里由于是用于用于测试时,临时建的数据库用于测试使用,在实际使用过程中些许改点参数就可以使用了 /// <summary> /// 是否存在该记录 /// </summary> public bool Exists(long Id) { string sql = "select count(*) Name from t_temp where

yii中数据的"增删改查"相关工作!(此文比较乱,需细看)

使用findByPk()根据数据表主键查询的是对象,不需要使用foreach()循环出来 但是使用findall()和find()查询的是对象类型的数组需要使用foreach()循环出来 ======================================= public function getMinLimit () { $sql = "..."; $result = yii::app()->db->createCommand($sql); $query = $r

Mybatis学习总结(二)—使用接口实现数据的增删改查

在这一篇中,让我们使用接口来实现一个用户数据的增删改查. 完成后的项目结构如下图所示: 在这里,person代表了一个用户的实体类.在该类中,描述了相关的信息,包括id.name.age.id_num信息.而personMapper则是该实体类的一个配置文件.需要注意的是,在上一篇博文中,namespace属性的值是其本身,而在这一篇中,使用的是接口.那么两者有什么区别呢?使用接口,那么相关的操作方法不用自己去实现,只需要调用该接口的相关的方法就能够实现相应的功能. 那么,在这里就有一个问题,接