Axure教程——表格内部修改

news2025/1/13 13:20:08

本文介绍的时用Axue中的中继器制作表内修改效果
效果
在这里插入图片描述
预览地址:https://w97xns.axshare.com

功能

点击某条数据的”编辑“按钮可以修改此条数据的每项数据,”编辑“和”删除“按钮变为”保存“和”取消‘按钮

制作
需要的元件:矩形、中继器、表格、动态面板
制作过程

1、表格

拖入一个表格元件,表格设置5×1,表格每项分别为:姓名、性别、年龄、班级、操作,(与中继器的值对应)如图:
在这里插入图片描述
2、中继器
在表格下方拖入一个中继器元件,对其赋值,如图:
在这里插入图片描述
3、表格内部
拖入五个矩形元件,分别命名为:姓名、性别、年龄、班级、操作,(与中继器的值对应),如图:
在这里插入图片描述
在矩形“姓名”、“性别”、“年龄”、“班级”四个矩形中拖入四个文本框,分别命名为:姓名、性别、年龄、班级,设置隐藏状态,并组合一起,如图:
在这里插入图片描述
在矩形“操作”矩形中拖入一个动态面板,命名为“操作”,设置“编辑”和“保存‘两个状态,如图:
在这里插入图片描述
进入”编辑“状态中,拖入两个矩形元件,制作编辑和删除两个按钮,如图:
在这里插入图片描述
进入“保存”状态中,拖入两个矩形元件,制作保存和取消两个按钮,如图:
在这里插入图片描述
4、提示框
在中继器上拖入一个矩形,命名为“提示”,设置隐藏状态,文本设置为“成功”,如图:
在这里插入图片描述

原型制作完毕

交互
1、中继器
中继器每项加载时,设置”“姓名”文本为[[Item.xingming]],”性别“为[[Item.xingbie]],”年龄“为[[Item.nianling]],”班级“文本为[[Item.banji]],如图:
在这里插入图片描述
2、“编辑”按钮
”编辑“鼠标点击时,设置动态面板”操作“为保存状态,设置文本框组合的可见性为显示,设置矩形”姓名“文本框文本为[[Item.xingming]]、”性别“文本框文本为[[Item.xingbie]]、”年龄“文本框文本为[[Item.nianling]]、”班级“文本框文本为[[Item.banji]],如图:
在这里插入图片描述
标记行This在中继器,整体设置,如图:
在这里插入图片描述

3、删除按钮
”删除“按钮鼠标点击时,设置,如图:
在这里插入图片描述
4、保存按钮
”保存“鼠标点击时,设置动态面板”操作“为编辑状态,隐藏文本框组合,更新”xingming“、”xingbie“、“nianling”、“banji”,,提示框“提示”向上滑动,设置如图:
在这里插入图片描述
5、取消按钮
鼠标点击时设置”操作“状态为编辑,隐藏文本框组合,如图:
在这里插入图片描述
整体制作完成,希望对您有帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/700733.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

asp.net MVC

文件目录 页面 HTML与Script的联系 HTML元素通过调用脚本中的function来触发前端的动作要进行的后端逻辑操作 Script中通过选择器$(“#str”)来改变前端HTML的显示数据 Script中有两种类型的函数模式 $(function(){ … }) :window.onload时调用。function btnRese…

​Chamilo 学习管理软件存在命令执行漏洞(CVE-2023-34960)

Chamilo 学习管理软件存在命令执行漏洞(CVE-2023-34960) 免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责&#xff…

Python基础语法笔记整理(黑马8天学会python笔记)

Python 第一章、基础语法 01.字面量(写在代码中的固定的值) 02.注释 # 单行注释 """ 多行注释 """03.变量 变量无类型,数据有类型 变量名 变量值04.数据类型 数据类型: type()05.类型转换 字符串转数字&#xff…

【unity实战】制作一个类帝国时代、红警——RTS战略性游戏

文章目录 先来看看实现的最终效果什么是RTS游戏一、两种方法实现相机的移动旋转缩放以及拖拽功能前言准备第一种办法1. 移动1.1 代码实现,里面都写了详细的中文注释,就不过多解释了1.2 效果:1.3 问题: 2. 缩放2.1 代码 3. 限制范围…

Linux内核TCP参数调优全面解读

Linux内核TCP参数调优全面解读 前言 TCP 性能的提升不仅考察 TCP 的理论知识,还考察了对于操心系统提供的内核参数的理解与应用。 TCP 协议是由操作系统实现,所以操作系统提供了不少调节 TCP 的参数。 如何正确有效的使用这些参数,来提高 T…

微前端框架MicroApp入门学习笔记(一)

1、简介 微前端是一种架构风格,旨在通过将前端应用程序拆分为更小、更可管理的部分,使多个团队能够独立开发、部署和维护这些部分,从而实现前端的可扩展性和可维护性。   MicroApp框架是京东出品的一种用于构建微前端架构的开源框架&#x…

Linux系统开机启动详细流程

目录 Linux系统开机启动流程为什么要了解系统开机启动流程关机的命令开机流程图:开机自检(Power-On Self-Test,POST)BIOSROM和RAMBIOS的介绍CMOS的介绍:BIOS和CMOS的区别和联系如何进入BIOS系统?如何改BIOS的顺序以及为…

vue js实现表格行拖拽

效果图&#xff1a; <a-table :dataSource"dataSource" :columns"columns" :pagination"false"><template #bodyCell"{ column, record }"><template v-if"column.key td"><div style"cursor: p…

|DataDirectory| 解决Web.config中数据库连接的相对路径问题

1、业务背景 维护老系统代码&#xff0c;Web.config中数据库字符串连接的相对路径的处理 2、核心代码如下 <connectionStrings><add name"connString" connectionString"ProviderMicrosoft.Jet.OLEDB.4.0;Data Source|DataDirectory|\FnDB.mdb"…

【Java】Java中的String类

文章目录 一、认识 String 类二、String 类的常用方法2.1 构造方法2.2 String 类对象之间的比较2.3 字符串查找2.4 字符串的转换2.5 字符串替换2.6 字符串拆分2.7 字符串截取2.8 字符串常量池2.9 字符串的不可变性 三、StringBuilder 和 StringBuffer3.1 StringBuilder3.2 Stri…

robotframework接口自动化测试详解

我们在使用rebotframework的时候&#xff0c;不只是能做UI自动化&#xff0c;接口自动化也是可以的。 那么这里就整理一下rebotframework_接口自动化的应用&#xff1a; 一、编写接口测试 由上图可知&#xff0c;该接口如下信息&#xff1a; 接口功能描述&#xff1a;预诊模…

Spring6快速入门

Spring6快速入门 各工具版本要求&#xff1a; JDK:Java17 Maven:3.6 Spring:6.0.9 简介 Spring是一个控制反转(IOC)&#xff0c;面向切面(AOP)编程的轻量级框架。 2002年&#xff0c;Rod Johnson首次推出Spring框架的雏形&#xff0c;interface21(https://interface21.io/) 200…

python爬虫-获取cookie实例小记

注意&#xff01;&#xff01;&#xff01;&#xff01;某XX网站逆向实例仅作为学习案例&#xff0c;禁止其他个人以及团体做谋利用途&#xff01;&#xff01;&#xff01; 第一步&#xff1a;请求拿到响应内容。并分析。 第二步&#xff1a;关键步骤分析(这部分参考的B站图灵…

2023 年互联网 Java 工程师高级面试八股文汇总(1260 道题目附解析)

今年的行情&#xff0c;让招聘面试变得雪上加霜。已经有不少大厂&#xff0c;如腾讯、字节跳动的招聘名额明显减少&#xff0c;面试门槛却一再拔高&#xff0c;如果不用心准备&#xff0c;很可能就被面试官怼得哑口无言&#xff0c;甚至失去了难得的机会。 现如今&#xff0c;…

concurrenthashmap原理

目录 一、Concurrent类型的容器 二、HashMap多线程死链问题 三、Concurrenthashmap8原理 1、构造器 2、get流程 3、put流程 4、initTable 5、addCount方法 6、size流程 四、Concurrenthashmap7原理 1、put流程 2、rehash扩容流程 3、get流程 一、Concurrent类型的…

如何选型低代码平台

编者按&#xff1a;近年来&#xff0c;在数字经济迅速发展的背景下&#xff0c;越来越多的企业开始建立健全业务系统&#xff0c;借助数字化工具提升管理效率。企业如何选自己合适的产品&#xff0c;本文从低代码定义&#xff0c;特点技术路线做了介绍。其中MyApps低代码平台拥…

git常用命令之tag

11. Tag 11.1 创建tag 命令作用轻量标签git tag v1.0基于本地当前分支最新commit创建tag v1.0git tag v.0325 125a1d1给指定commit 125a1d打标签附注标签git tag -a v.0329 -m "给标签添加说明" 125a1d1基于指定commit创建标签并添加说明git tag -a v.0329 -m &quo…

联邦学习中怎样对数据质量进行评估

目录 联邦学习中怎样对数据质量进行评估 联邦学习中怎么在不暴露数据的情况下&#xff0c;证明数据量条目数 联邦学习中怎样进行数据质量评估 联邦学习中怎样对数据质量进行评估 在联邦学习中&#xff0c;评估数据质量是至关重要的&#xff0c;因为数据质量直接影响到模型的…

Redis 简介与数据类型介绍

目录 ​编辑 一、Redis是什么&#xff1f; 二、redis五大基本类型 2.1 String(字符串) 2.1.1 应用场景 1&#xff09;缓存功能 2&#xff09;计数器 3&#xff09;统计多单位的数量 4&#xff09;共享用户session 2.2 List(列表) 2.2.1 应用场景 1&#xff09;消息队列 2…

07 redux的使用

总结 一.reduxjs/toolkit使用 1.1安装 安装&#xff1a; npm install reduxjs/toolkit在src目录中的store目录中的index.js中添加 1.2导入包中的对象 导入包中的对象 import { createSlice, configureStore } from reduxjs/toolkit1.3创建切片对象 创建切片对象 //这个…