Axure教程—中继器删除与批量删除

news2024/11/15 18:06:21

本文介绍的是用Axure中的中继器实现删除与批量删除效果
效果
在这里插入图片描述
功能
1、选中某项数据删除,删除后提示“删除成功”
2、选择多项数据删除,删除后提示“删除成功”,如果不选取数据,点击”批量删除“按钮,提示”请至少选择一条数据“

制作
需要的元件:
表格、矩形和复选框
制作过程
1、表格
拖入一个表格元件,表格设置6×1,
在一个单元格中设计复选框,拖入一个矩形元件,设计大小为18×18,在此上加入勾选图片并设置为隐藏状态,矩形与图片组合一起,命名为”外“,如图:
在这里插入图片描述
其他表格单元格设置文本分别为姓名、性别,年龄、班级、操作,如图
在这里插入图片描述
2、中继器
在表格下方拖入一个中继器元件,命名为“删除”,其赋值为:
在这里插入图片描述
3、中继器内部
拖入一个矩形元件,命名为“全选”,大小设置为41×35,在此矩形中加入一个矩形元件,大小为18×18,在此上加入勾选图片并设置为隐藏状态,矩形与图片组合一起,命名为”内“,如图:

在这里插入图片描述
在此矩形右边拖入5个元件矩形,分别命名为:姓名、性别、年龄、班级、操作,在矩形“操作”中制作“删除”按钮,,所有元件组合一起命名为”内部组合“,如图:
在这里插入图片描述
3、批量删除
在表格上方拖入一个矩形元件,命名为”批量删除“,文本设置为”批量删除“,在此右边拖入一个复选框元件,命名为”复选框“,设置为隐藏状态,如图:

在这里插入图片描述
最终设计,如图:
在这里插入图片描述

交互
1、批量删除
鼠标点击时,对此按钮交互设置,如图:
在这里插入图片描述
2、 外部复选框
针对复选框矩形,选中时显示图片,并设置组合”内“为"true",标记行删除全部,如图:

在这里插入图片描述
”取消选中“时,设置组合”内“的选中状态为”false“,隐藏图片,取消标记行删除全部,如图:
在这里插入图片描述
整体设置,如图:
在这里插入图片描述
组合”外“鼠标点击时,设置选中状态为”toggle“,如图:
在这里插入图片描述
3、中继器
设置中继器每项加载时,设置”“姓名”文本为[[Item.xingming]],”性别“为[[Item.xingbie]],”年龄“为[[Item.nianling]],”班级“文本为[[Item.banji]],如图:
在这里插入图片描述
4、内部复选框

针对复选框矩形,选中时显示图片,并设置组合”内部组合“为"true",标记行this删除,设置”复选框“状态为”true“,如图:

在这里插入图片描述
取消选中时隐藏图片,设置”内部组合“选中状态为”false“,取消标记行This删除,如图:
在这里插入图片描述
整体设计,如图:
在这里插入图片描述
组合”内“鼠标点击时,设置选中状态为”toggle“,如图:
在这里插入图片描述
”内部组合“鼠标点击时选中状态为”toggle“
在这里插入图片描述
删除按钮鼠标点击时,设置标记行This在删除,删除行This从删除,显示”删除成功“提示框向上滑动,时间为200毫秒,复选框、组合内,组合外的选中状态都为”false“,如图:
在这里插入图片描述
整体设计完成。

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

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

相关文章

SNMP 计算机网络管理 一文理清-管理信息库,OID,MIB结构树,SNMP协议体系结构

⬜⬜⬜ 🐰🟧🟨🟩🟦🟪(*^▽^*)欢迎光临 🟧🟨🟩🟦🟪🐰⬜⬜⬜ ✏️write in front✏️ 📝个人主页:陈丹宇jmu &am…

Java接口详解

目录 接口方法 接口的属性 接口方法 在Java设计的时候, 我们所说的接口,不同于类,我们尝尝希望一个类能满足某个特定的功能,或者需求. 我们在使用Arrays类中的sort方法对对象数组进行排序,但是对象所属的类必须实现Comparable接口: 可以看到里面只有一个方法: public inter…

【动态规划算法】第二题:⾯试题08.01.三步问题

💖作者:小树苗渴望变成参天大树 🎉作者宣言:认真写好每一篇博客 🎊作者gitee:gitee 如 果 你 喜 欢 作 者 的 文 章 ,就 给 作 者 点 点 关 注 吧! 文章目录 前言 前言 今天我们开始讲解动态规…

MySQL数据库总结 之 约束(restraint) 外键约束

前三篇关于MySQL的博客,地址如下: 1. MySQL数据库 && SQL语言命令总结 && 数据类型、运算符和聚合函数汇总_Flying Bulldog的博客-CSDN博客 2. 从0到1 && 关于MySQL的数据库和表_Flying Bulldog的博客-CSDN博客 3. MySQL数据…

Protobuf实现序列化和反序列化详细步骤

步骤1&#xff1a;添加对应的依赖 <dependency><groupId>com.google.protobuf</groupId><artifactId>protobuf-java</artifactId><version>3.7.1</version> </dependency>步骤2&#xff1a;编写bulid.bat文件执行&#xff0c…

react组件--npm发包总过程(超全教程!建议收藏!)

npm发包总过程 npm账号登录注册&#xff08;已有账号可跳过&#xff09;登录验证是否登录成功创建组件项目目录图新建文件夹&#xff0c;并初始化安装依赖/src/index.js --打包入口文件src/components/button/index.js --组件逻辑代码src/components/button/index.css --组件逻…

10 次面试 9 次被刷?吃透这 500 道大厂 Java 高频面试题后,怒斩 offer

很多 Java 工程师的技术不错&#xff0c;但是一面试就头疼&#xff0c;10 次面试 9 次都是被刷&#xff0c;过的那次还是去了家不知名的小公司。 问题就在于&#xff1a;面试有技巧&#xff0c;而你不会把自己的能力表达给面试官。 应届生&#xff1a;你该如何准备简历&#x…

verilog HDL -生成块 - generate——endgenerate

参考&#xff1a;vrilog数字系统设计 夏宇闻 【第3版】 5.7 生成块理解 生成语句可以动态的生成verilog代码&#xff0c;方便参数化模块的生成&#xff0c;大大的简化程序的编写过程,常用于以下情况&#xff1a; 对矢量中的多个位进行重复操作进行多个模块的实例引用的重复操…

Anacoda3中成功配置Tesseract-OCR超详细教程!!(win7、win10)

Anacoda3中成功配置Tesseract-OCR Tesseract-OCR简介安装及配置环境步骤1、在Anaconda虚拟环境中安装pytesseract第三方库2、下载tesseract-ocr安装包并安装3、环境配置检验是否安装成功修改pytesseract.py文件&#xff08;很重要&#xff01;&#xff09; Tesseract-OCR简介 …

C语言常用的数据转换函数

编程时&#xff0c;经常用到进制转换、字符转换。现整理记录如下&#xff1a; 一、字符串转十六进制 void StrToHex(char *pbDest, char *pbSrc, int nLen) {char h1,h2;char s1,s2;int i;for (i0; i<nLen/2; i){h1 pbSrc[2*i];h2 pbSrc[2*i1];s1 toupper(h1) - 0x30; …

ASP.NET Core MVC -- 控制器

添加控制器 访问测试 默认控制器访问index public string Index() {return "This is my default action..."; }特定访问路径 public string Welcome() {return "This is the Welcome action method..."; } 特定路径访问&#xff0c;带参数 public str…

查询Oracle当前用户下,所有数据表的总条数

需求&#xff1a;查询Oracle当前用户下&#xff0c;所有数据表的总条数 方法&#xff1a;存储过程 右键点击Procedures&#xff0c;点击New 点击OK 把存储过程写进去&#xff0c;然后点击编译运行&#xff1a; create or replace procedure tables_count ist_count numbe…

dolphinscheduler的switch组件

目录 一、背景 switch组件官方文档 Switch简介 创建任务 任务参数 二、实操DEMO SQL任务switch判断DEMO 第一步&#xff1a;新建SQL任务&#xff0c;配置好参数 第二步&#xff1a; 定义SWITCH节点 三、参考资料 默认任务参数 一、背景 Apache DolphinScheduler 是…

B站广告投放,B站有哪些投放广告的方式比较靠谱?

随着各视频平台发展&#xff0c;B站也逐渐壮大&#xff0c;成为当下最受年轻人喜爱的社交媒体平台之一&#xff0c;B站根据年轻人的喜好提供了多样化的产品和服务&#xff0c;如视频、直播、游戏、漫画、影业、演出活动、专栏等。形成了自己独特的up主文化。B站拥有着高黏性和高…

如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题?

这个是肯定的&#xff0c;用 MQ 有个基本原则&#xff0c;就是数据不能多一条&#xff0c;也不能少一条&#xff0c;不能多&#xff0c;就是 前面说的重复消费和幂等性问题。不能少&#xff0c;就是说这数据别搞丢了。那这个问题你必须得考 虑一下。 如果说你这个是用 MQ 来传…

基于单片机心率脉搏心率血压体温血氧检测系统的设计与实现

功能介绍 本次设计通过32系列单片机STM32进行数据处理&#xff0c;配置引脚和JFC103传感器以及温度传感器进行数据通信。采用防水DS18B20进行腋下温度采集&#xff0c;通过单总线方式进行数据传输。心率血氧血压模块通过串口通信方式把采集到的数据发送给单片机&#xff0c;所有…

mac版本的xshell远程ssh工具

官网下载地址&#xff1a; https://www.royalapps.com/ts/win/download 注意&#xff1a;一定要保存(下载安装之后记得一定要点击&#xff1a;Apply & Close&#xff0c;保存设置) 使用

Transactional outbox pattern

文章目录 Transactional outbox pattern事件驱动架构(Event Driven Architecture, EDA)数据库事务和消息发布的一致性问题Transactional outbox如何解决数据事务和消息发布之间的一致性问题如何实现Transactional outbox pattern消息幂等性问题Transactional outbox pattern能保…

百万连接实现01:使用epoll+多线程+多IP地址管理tcp客户端集群

操作系统采用 <客户端IP : 客户端端口> : <服务端IP : 服务端端口> 四元组来标识一条TCP连接。 所以要想实现百万连接&#xff1a; 第一种是服务器端只开启一个进程&#xff0c;然后使用很多个客户端进程绑定不同的客户端 ip 来连接&#xff0c;假设 20个ip * 5w&a…

linux使用grep命令查询nginx的进程情况时总是出现 grep --color=auto nginx

问题&#xff1a; 每次使用ps aux | grep 服务名 命令查询某个服务的进程时&#xff0c;总会出现一条grep --colorauto 服务名 例如&#xff1a; ps aux | grep nginx # 会出现图片中的情况解答&#xff1a; 这是因为grep 也是一条命令&#xff0c;它在输出时&#xff0c;会…