Axure设计之中继器表格——拖动列调整位置教程(中继器)

news2025/3/30 15:22:40

一、原理介绍

实现表格列的拖动排序,主要依赖Axure的动态面板中继器两大核心功能:

  1. 动态面板交互控制

    • 将表格的列标题封装在动态面板中,通过拖拽事件(开始、移动、结束)捕捉用户操作

    • 在拖拽过程中实时计算鼠标位置,动态调整列的位置视觉反馈

    • 记录原始列位置与目标位置的索引值

  2. 中继器数据联动

    • 表格内容通过中继器动态生成,每个单元格与数据集的字段绑定

    • 当列顺序改变时,通过调整中继器项目的显示顺序实现内容同步更新

    • 利用中继器的「项目加载时」事件自动填充数据

  3. 坐标定位机制

    • 通过比较鼠标移动的X轴坐标差,判断列应该向左或向右移动

    • 在拖拽结束时,根据最终位置重新排列所有列的显示顺序

二、示例预览

源文件已上传到CSDN资源中心,需要可以直接下载源文件:中继器表格拖动列调整位置案例

三、材料准备

  • 矩形元件:用于构建表格的表头和行内容。
  • 中继器:用于生成表格内容。
  • 动态面板:只有动态面板才能实现拖动效果,因此需要将中继器中的行转换为动态面板。

四、步骤详解

1、表格表头设置

  • 使用矩形元件制作不需要参与拖动的表头,例如“序号、操作”列。

  • 需要拖动的列使用中继器实现,设置布局为水平,命名为表头中继器。

  • 在表头中继器表格中,设置排序列(如“xh”列)和内容列,排序列用于逻辑交互。

2、表格数据行设置

  • 数据行直接使用中继器,这里定义好列对应的字段,命名为数据行中继器。

  • 中继器如果需要移入高亮效果,可以设置相应的交互样式。

3、拖动列设置

  • 这里使用矩形元件,分别复制表头的矩形和数据行的矩形组合成表格完整的一列,这里命名为拖动列组合。

  • 当我们鼠标拖动列头的某列时,其实就是控制拖动列的显示及位置移动。

4、动态面板设置:

  • 表头中继器内部添加一个动态面板,置于最上方,用于拖动交互。

  • 动态面板宽度和表格同宽,高度为列头的高度。

5、交互设置

  • 表头中继器载入时:设置中继器按照排序列(如“xh”列)的升序排列。
  • 中继器每项加载时:将中继器表格中的内容设置到对应的矩形元件中。
  • 动态面板交互:分别设置好拖动开始时、拖动时、拖动结束时、移动时、单击时的交互。

五、注意事项

  • 在设置拖动效果时,要确保动态面板的高度和位置适中,以便于用户拖动。

  • 在计算移动距离和目标位置时,要考虑边界情况,如拖动到底部或顶部时的处理。

  • 可以根据需要添加美化效果,如高亮显示、斑马线效果等。

通过以上步骤,就可以在Axure中实现表格行的任意拖动调换位置排序功能。这一功能在自定义表格、数据展示等场景中非常实用。

 

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

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

相关文章

基于大数据的各品牌手机销量数据可视化分析系统(源码+lw+部署文档+讲解),源码可白嫖!

摘要 时代在飞速进步,每个行业都在努力发展现在先进技术,通过这些先进的技术来提高自己的水平和优势,各品牌手机销量数据可视化分析系统当然不能排除在外。基于大数据的各品牌手机销量数据可视化分析系统是在实际应用和软件工程的开发原理之…

Open CASCADE学习|基于AIS_PointCloud显示点集

定义与用途 AIS_PointCloud是OpenCASCADE中用于表示和管理点云数据的类,能够高效地绘制大量任意彩色点集。它通过Graphic3d_ArrayOfPoints将点数据传递给OpenGL图形驱动程序,以将设定点绘制为“点精灵”数组,且点数据被打包到顶点缓冲区对象…

GOC作业

实验室logo 题目描述 绘制烧毁实验室logo,它是由半径120,颜色6号色的空心元构成,中间的图案由线段长度为75,半径为15的实心圆构成,颜色从1号色开始,到6号色,如图所示 代码参考: …

本地部署仓库管理工具 Gitlab 并实现外部访问

Gitlab是一款自托管的 Git 仓库管理工具,它提供了完整的代码管理功能,包括代码托管、版本控制、代码合并请求、问题追踪、持续集成等。 本文将详细的介绍如何利用 Docker 在本地部署 Gitlab 并结合路由侠实现外网访问本地部署的 Gitlab 。‌ 第一步&am…

华鲲振宇天工TG225 B1国产服务器试装openEuler22.03 -SP4系统

今天测试了一下在华鲲振宇公司的天工TG225 B1国产服务器上进行openEuler22.03 -SP4操作系统的试装,本文记录整个测试过程。 一、服务器信息 1、服务器型号 Huakun TG225 B1 (D) 2、登录IPMI帐户信息 初始用户名Tech.ON 密码TianGong8000 二、磁盘RAID配置 测试…

linux常用指令(9)

加油同志们,我们离胜利不远了,再有两天我们就可以了解完linux的一些基本常用指令了,到时我们便可以进入一些shell脚本语法了,那么话不多说,来看. 1.more指令 功能描述:more指令是一个基于vi编辑器的文本过滤器,它以全屏幕的方式按页显示文本文件的内容. 基本语法…

【windows搭建lvgl模拟环境之VSCode】

搭建vscodelvgl8.3所有资料,0积分 通过在windows搭建LVGL模拟环境方便UI界面开发和调试,后续只需将相关的代码移植到项目中即可,方便调试,PC上支持下列模拟器: 本文说明两种方法搭建模拟器环境,分别采用&am…

【BFS染色问题】P1162填涂颜色例题+核心逻辑

文章目录 【算法思路】【代码示例】 BFS处理染色问题的核心逻辑 【算法思路】 要判断一个数字 0 是否在闭合圈内,可以换个角度思考。不在闭合圈内的 0 是可以从方阵的边界出发,通过上下左右移动,只经过其他 0 到达的。 思路①.我们可以从方…

【多学科稳定EI会议大合集】计算机应用、通信信号、电气能源工程、社科经管教育、光学光电、遥感测绘、生物医学等多学科征稿!

在当今科技高速发展的时代,多学科领域的学术交流与融合显得尤为重要。以下是稳定EI会议合集,涵盖计算机、信息通信、电气能源、社科经管教育、光学遥感、生物医学等多个学科领域。 会议皆已通过国际知名出版社出版审核,EI检索稳定&#xff0…

ElasticSearch -- 部署完整步骤

前期准备 创建用户: sudo useradd hadoop sudo passwd hadoop# 密码 xxx系统层面,禁用内存交换 sudo swapoff -a修改 sudo vi /etc/security/limits.conf hadoop hard memlock unlimited hadoop soft memlock unlimited hadoop soft nofile 65536 had…

医学交互作用分析步骤和目的(R语言)

医学交互作用分析的目的和用途(R语言) 医学交互作用分析一直是医学数据分析的组成部分,总结最近的一些认识。 目的: 在独立危险因素鉴定的研究中,(独立危险因素的)交互作用可以作为独立危险因…

创新前沿 | 接管主机即刻增量CDP备份,高效保障接管期间业务安全!

科力锐创新前沿系列 接管主机增量CDP备份 高效保障接管业务安全 当核心系统遭遇系统故障或误操作导致数据逻辑损毁等,往往需要将生产业务主机接管起来,继续对外提供服务,保障业务连续性。 然而,你的接管主机真的安全吗?一旦接…

《基于python游戏设计与实现》开题报告

个人主页:@大数据蟒行探索者 一、研究背景、目的及意义 (一)研究背景 游戏的普及与成功:随着智能手机的普及和网络技术的发展,手机游戏产业逐渐成熟,成为娱乐文化产业的重要组成部分。《开心消消乐》作为一款休闲类游戏,自上线以来凭借其简单易上手的玩法和丰富的…

Netty源码—7.ByteBuf原理三

大纲 9.Netty的内存规格 10.缓存数据结构 11.命中缓存的分配流程 12.Netty里有关内存分配的重要概念 13.Page级别的内存分配 14.SubPage级别的内存分配 15.ByteBuf的回收 9.Netty的内存规格 (1)4种内存规格 (2)内存申请单位 (1)4种内存规格 一.tiny:表示从…

(免费开源)图片去水印以及照片擦除功能,你会选择使用吗?

图片去水印以及相关人物擦除是一个非常小众的需求,就是将原本图片上的文字或者logo去除让变成一个干净的图片,但市面上很多都是付费的,今天就介绍一下这款免费工具。 工具演示效果 工具介绍 名称:lama-projct 利用AI模型训练LaM…

2025-03-26 学习记录--C/C++-PTA 6-2 顺序表操作集

合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。💪🏻 一、题目描述 ⭐️ 6-2 顺序表操作集 本题要求实现顺序表的操作集。 函数接口定义: 👇🏻 …

SQL-木马植入、报错注入及其他

一、读写权限确认 show global variables like %secure%; 查看mysql全局变量的配置,当输入以上命令时,结果 secure_file_priv 空的时候,任意读写 secure_file_priv 某个路径的时候,只能在规定的那个路径下读写 secure_file_pri…

用C#实现UDP服务器

对UDP服务器的要求 如同TCP通信一样让UDP服务端可以服务多个客户端 需要具备的条件: 1.区分消息类型(不需要处理分包、黏包) 2.能够接收多个客户端的消息 3.能够主动给自己发过消息的客户端发消息(记录客户端信息)…

印刷电路板 (PCB) 的影响何时重要?在模拟环境中导航

我和我的同事们经常被问到关于 PCB 效应的相同问题,例如: 仿真何时需要 PCB 效果? 为什么时域仿真需要 PCB 效应? 当 PCB 效应必须包含在仿真中时,频率是否重要? 设计人员应该在多大程度上关注 VRM 模型中包…

Leetcode 最小基因变化

java solution&#xff1a;BFS 算法 class Solution {public int minMutation(String startGene, String endGene, String[] bank) {//首先创建一个集合来存储有效基因串Set<String> bankSet new HashSet<>(Arrays.asList(bank));if(!bankSet.contains(endGene))…