首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在ag-grid ng2中拖放行(重新排序行)

在ag-Grid NG2中实现拖放行(重新排序行)的方法如下:

  1. 首先,确保你已经安装了ag-Grid NG2的依赖包,并在你的项目中引入了ag-Grid模块。
  2. 在你的组件中,创建一个ag-Grid的实例,并设置相应的列定义和行数据。
  3. 在ag-Grid的配置中,启用行拖放功能。你可以通过设置rowDrag属性为true来实现这一点。
  4. 在你的组件中,创建一个回调函数来处理拖放行的逻辑。你可以使用onRowDragEnd事件来监听行拖放结束的事件。
  5. 在回调函数中,你可以获取拖放行的相关信息,例如拖放行的起始索引和目标索引。你可以使用这些信息来重新排序行数据。

下面是一个示例代码:

代码语言:txt
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-grid',
  template: `
    <ag-grid-angular
      style="width: 500px; height: 300px;"
      class="ag-theme-alpine"
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      [rowDrag]="true"
      (onRowDragEnd)="onRowDragEnd($event)"
    ></ag-grid-angular>
  `,
})
export class GridComponent {
  rowData = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' },
    { id: 4, name: 'Alice' },
  ];

  columnDefs = [
    { field: 'id' },
    { field: 'name' },
  ];

  onRowDragEnd(event: any) {
    const { node, overIndex } = event;
    const movedData = node.data;
    const currentIndex = this.rowData.indexOf(movedData);

    // 重新排序行数据
    this.rowData.splice(currentIndex, 1);
    this.rowData.splice(overIndex, 0, movedData);
  }
}

在上面的示例中,我们创建了一个简单的ag-Grid表格,并启用了行拖放功能。当拖放行结束时,onRowDragEnd回调函数会被触发,我们可以在这个函数中重新排序行数据。

这是一个基本的实现方法,你可以根据自己的需求进行扩展和定制。关于ag-Grid NG2的更多详细信息和功能,请参考ag-Grid官方文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Godot Engine:跨平台游戏开发的新境界 | 开源日报 No.92

ag-grid/ag-grid[2] Stars: 10.2k License: NOASSERTION picture AG Grid,是一个功能齐全且高度可定制的 JavaScript 数据表格。...它支持 React / Angular / Vue / 纯 JavaScript,并提供了标准网格所需的所有特性,列交互、分页、排序选择等。...插件配置文件独立:将插件设置从 .env 文件移动到根目录下的新建 plugins_config.yaml 文件,增强了对插件配置的灵活控制。...可以同时在所有 Web 应用输入底部键入的内容,但如果您想进一步探索其中之一,则可以独立进行操作,因为它们只是 webview。.../ag-grid: https://github.com/ag-grid/ag-grid [3] mapbox/mapbox-gl-js: https://github.com/mapbox/mapbox-gl-js

34610

利用Tableau绘制辐射堆叠图,炫酷易上手

前言 我在不久前见到过这样的图,我就想可以写一篇关于如何在Tableau创建辐射堆叠图,这是个基于合计百分比运算的堆叠图,但整体的形状是圆形的,作图的整个过程十分有趣,我希望你可以享受它。 ?...订单日期”至“筛选器”,并选中“2018” ●将“标记栏”的类型改为“多边形” ●“路径(数据桶)”至“列” ♢ 在胶囊处右键并确保“显示缺失值”是选中状态 ♢ 将胶囊至“标记栏”的“路径”...●“细分”至“标记栏”的“颜色” ●“订单日期”至“标记栏”的“详细信息” ♢ 在胶囊处右键,并将其转化为“离散”与“月” ●“X”至“列” ♢ 在胶囊处右键,将计算依据改为“路径(数据桶...)” ●“Y”至“” ♢ 在胶囊处右键,将计算依据改为“路径(数据桶)” 全部操作完成后会看到如下图形: ?...♢ 在“嵌套计算”处,将计算依据改为“表计算_细分销售额” ♢ 在“计算依据”处,将计算依据改为“特定维度”,选中“细分”与“路径(数据桶)”,并把“细分”拖到顶部 ♢ 所在级别选为“最深”,重新启动间隔选为

1.4K50

InnoDB目前处理死锁的方法

InnoDB目前处理死锁的方法 将持有最少级排它锁的事务回滚。 如果是因为死锁引起的回滚,可以考虑在应用程序重新。...需要说明的是,这个参数并不是只用来解决死锁问题,在并发访问比较高的情况下,如果大量事务因无法立即获得所需的锁而挂起,会占用大量计算机资源,造成严重性能问题,甚至跨数据库。...介绍几种避免死锁的常用方法 (1)在应用,如果不同的程序会并发存取多个表,应尽量约定以相同的顺序来访问表,这样可以大大降低产生死锁的机会。...(2)在程序以批量方式处理数据的时候,如果事先对数据排序,保证每个线程按固定的顺序来处理记录,也可以大大降低出现死锁的可能。...返回结果包括死锁相关事务的详细信息,引发死锁的SQL语句,事务已经获得的锁,正在等待什么锁,以及被回滚的事务等。

86420

盘点一道窗口函数的数据分析面试题

按照功能来讲,窗口函数是在不损失行数的背景下,按照指定维度进行分组,按照指定维度进行排序的一种排序函数,聚合等作用的函数,窗口函数的熟练程度决定了你SQL的熟练程度,而在面试是一道必考题,在业务实践也是一道迈不过去的坎儿...,如果事件分组和上一个事件不一致,或者用户id不一致的话,就要重新计数 根据图片和描述的情景,我们发现跟上一道题有一点点差别,就是数据顺序已经按照时间排好了序,如果id和cat相同,则进行顺序排序;如果...id和cat不同,则要重新从1进行排序。...以下为脚本: # 1 构造数据 以题一数据为例 # 2 脚本 a 构造连续排序 # 备注 原题中时间标记为1 2 3 ,而实际时间肯定为标准的时间戳形式,因此需要通过连续数来构造 # 加with...,即按照指定维度分组,指定维度排序,将某列向下平移n,空值用第三个参数默认 # 因而本文的意思就是将order_rnk这个连续数序列按照add_col这个辅助列,组内向下平移1,如果是空值, # 用

44720

下一代IPS云防火墙 | 云安全组的批量自动化5元组替代安全防护产品?

对安全组的配置逻辑进行了重新设计,维护了统一的访问控制管理页面,极大优化了安全组的使用体验。云防火墙提供基于五元组的规则配置界面,并通过智能转换算法自动下发安全组策略,大幅简化了安全组的配置操作。...放行策略,放行命中规则的流量,不记录访问控制日志。 阻断策略,拦截命中规则的流量,记录访问控制日志。...在内网对内网的双向阻断或放行的场景,不再需要在两个方向配置两条一模一样的规则。使用这个功能可以自动实现这种操作,降低规则配置的工作量。...注意: 请您不要在其他位置手动修改云防火墙维护的安全组或路由表( NAT 路由表、CVM 安全组等),请统一在云防火墙的控制台中进行操作。...快速排序: 规则在列表的顺序,决定了执行的优先级。在入站规则列表上方,单击快速排序。 可以通过对规则的拖拽操作,快速完成规则优先级的调整。

2.3K51

『数据密集型应用系统设计』读书笔记(三)

在本章我们会从数据库的视角来讨论同样的问题: 数据库如何存储我们提供的数据,以及如何在我们需要时重新找到数据。...将值存储在索引 索引的键是查询要搜索的内容,而其值可以是以下两种情况之一: 实际的(文档,顶点) 对存储在别处的的引用 对于第二种情况,被存储的地方被称为堆文件(heap file),并且存储的数据没有特定的顺序...全文搜索和模糊索引 到目前为止所讨论的所有索引都假定你有确切的数据,并允许你查询键的确切值或具有排序顺序的键的值范围。他们不允许你做的是搜索类似的键,拼写错误的单词。这种模糊的查询需要不同的技术。...而且许多数据集不是那么大,所以将它们全部保存在内存是非常可行的。这导致了内存数据库的发展。 某些内存的键值存储( Memcached)仅用于缓存,在重新启动计算机时丢失的数据是可以接受的。...列式存储布局依赖于每个列文件包含相同顺序的。因此,如果你需要重新组装完整的,你可以从每个单独的列文件获取第 23 项,并将它们放在一起形成表的第 23

93150

【调研】GPU矩阵乘法的性能预测——Machine Learning Approach for Predicting The Performance of SpMV on GPU

对于非常大的矩阵,需要消耗大量的内存,并且慢计算速度。         ...大型的稀疏矩阵在做乘法时,由于大量零值的存在,不仅浪费了内存,还慢了计算的效率。因此,在许多科学研究, SpMV在计算成本上占主导地位。         ...在右图中,将所有数据集按照nnz值递增的顺序排序后,绘制出每个特征。可以观察到,数据集涵盖了所有这些特性的广泛范围。...ELL内核对输入矩阵的每一使用一个线程。第二节所示,ELL格式大小(在零填充之后)等于每行非零元素的最大数量(max)。...如何在GPU环境下加速矩阵运算,在很大程度上控制着EDA技术的并行化性能。

1.5K20

何在矩阵的上显示“其他”【3】切片器动态筛选的猫腻

往期推荐 如何在矩阵的上显示“其他”【1】 如何在矩阵的上显示“其他”【2】 正文开始 上一篇文章的末尾,我放了一张动图: 当年度切片器变换筛选时,子类别显示的种类和顺序是不相同的,但不变的是...: ①others永远显示在最后一 ②显示的10个子类别按照sales或sales%从高到低排序 看上去好像不难。...同样,按照其他的列进行排序,也是会得到同样的结果: 事情好像无法往下进行了。 但是铁人王进喜有句名言:“有条件要上,没有条件,创造条件也要上。” 我们再重新审视一下这个按列排序的错误。...我们来看一下效果: 这样基本达到了本文开始的要求: 当年度切片器变换筛选时,子类别显示的种类和顺序是不相同的,但不变的是: ①others永远显示在最后一 ②显示的10个子类别按照sales或sales...%从高到低排序 所以,剩下的问题就是如何在不显示子类别前面的年份的前提下,让不同年份对应的子类别不同,如下图所示: 关注【学谦数据运营】,下篇回答这个问题。

2.5K20

Mac 键盘快捷键

:显示一个对话框,询问您是要重新启动、睡眠还是关机。 Control–Command–电源按钮*:强制 Mac 重新启动,系统不会提示是否要存储任何打开且未存储的文稿。...(2) 在某些 App(“日历”或 Safari 浏览器),刷新或重新载入页面。(3) 在“软件更新”偏好设置,再次检查有没有软件更新。 Shift-Command-C:打开“电脑”窗口。...按住 Command 键移到另一个宗卷:将移的项目移到另一个宗卷,而不是拷贝它。 按住 Option 键移:拷贝托移的项目。移项目时指针会随之变化。...点按“访达”菜单栏的“前往”菜单查看用于打开许多常用文件夹(“应用程序”、“文稿”、“下载”、“实用工具”和“iCloud 云盘”)的快捷键。 ?...Control–P:上移一。 Control–N:下移一。 Control–O:在插入点后新插入一。 Control–T:将插入点后面的字符与插入点前面的字符交换。

2.6K20

网站服务器修改SSH默认22端口

因为在配置文件,# 是linux的注释,凡是#后的代码都不会执行。而SSH默认的端口为22,所以配置文件在默认的情况下以#出现。...0x3添加新的端口号 另起一手动添加新的端口(自定义端口建议选择5位数端口:10000-65535之间 ),保留22是为了防止防火墙屏蔽了其它端口导致无法连接VPS,比如你注释了端口22,新添加的12366...端口防火墙也没放行,那么恭喜你给自己挖坑了,可能下次你就无法通过SSH连接VPS了。...0x4重启SSH服务并重新连接 service sshd restart 12 service sshd restart 退出当前连接的SSH窗口,连接新的端口号。...get-zones ##列出支持的zone firewall-cmd --get-services ##列出支持的服务,在列表的服务是放行

15.1K60

HBase数据模型(1)

HBase数据模型(1) HBase数据模型(2) 1.0 HBase的特性 Table HBase以表(Table)的方式组织数据,数据存储在表。...2.2 逻辑模型上是一个稀疏的、长期存储的、多维度的和排序的映射表,表的每一可以有不同的列。...2.4 HBase中一个表有多行,每行都有多列,列的值有多个版本,每个版本称为一个单元格。每个单元存储的是不同时刻该列的值。...2.5 列名表示为 “列族前缀+修饰符”的方式,(anchor:cssnsi.com和anchor:my.look.ca其中,列族是anchor,修饰符分别是cssnsi.com和my.look.ca...HBase的列是按列族分组的,HFile是面向列的,存放行的不同物理文件,一个列族的数据存放在多个HFile,最重要的是一个列族的数据会被用一个Region管理,物理上存放在一起。

1.5K70

嘎嘎基础的JavaWeb()

字段1 排序方式1, 字段2 排序方式2 … ;ASC:升序(默认)DESC:降序如果是多字段排序,当第一个字段值相同时,才会根据第二个字段进行排序。...子查询:子查询返回的结果为一。表子查询:子查询返回的结果为多行多列。9.6 事务默认MySQL的事务时自动提交的,也就是说当执行一条DML语句,MySQL会立即隐式的提交事务。...里面的属性名可以随便写,:#{id}、#{value}日志输出可以再application.properies,打开mybatis的日志,并指定输出到控制台#配置mybatis的日志,指定输出到控制台...可以配置多个过滤器,这多个过滤器就形成了一个过滤器链顺序:注解配置的Filter,优先级是按照过滤器类名(字符串)的自然排序登录校验步骤:获取请求url判断请求url是否包含 login, 如果包含,...- Interceptor步骤:获取请求url判断请求url是否包含 login, 如果包含,说明是登录操作,放行

22300

MySQL 8 新特性详解

在MySQL 8之前,以下查询会隐式地对结果进行排序: SELECT column1, COUNT(*) FROM mytable GROUP BY column1; 在MySQL 8,如果你需要排序结果...原子DDL操作 数据定义语言(DDL)操作,CREATE TABLE、ALTER TABLE和DROP TABLE,在之前的MySQL版本可能不是原子的。...缓存(Row-Based Caching) MySQL 8引入了缓存的特性,以提高查询性能。缓存允许MySQL在内存缓存查询结果的一或多行数据。...当后续查询请求相同的数据时,MySQL可以直接从缓存获取结果,而无需重新执行查询。这可以显著减少查询执行时间和数据库负载。 7....现在,自增列的值会定期写入磁盘上的系统表,以确保在数据库服务器重新启动后能够恢复正确的值。 9. 新的系统字典表 MySQL 8引入了一个新的系统字典表来存储数据库元数据信息。

8010

大数据之脚踏实地学04--在Linux系统安装Java

实操 ---- 本期将基于《大数据之脚踏实地学03--Linux的常用文件级命令》的知识,分享如何在Linux系统安装Java。...再将桌面的下载文件至右侧框,如下图所示,完成安装软件的上传。 ? ? 上传完毕后,可以回到Xshell,利用ls命令查看文件是否上传成功,如下图所示: ?...如上图所示,在profile的末尾添加三代码。...(即在Linux系统敲入命令后,系统需要寻找该命令的位置,敲入java,系统便会到/opt/SoftWare/jdk1.8.0_181/bin寻找该命令); CLASSPATH变量指定类的搜索路径...(主要是Java内置的类和用户自定义的类); 编辑好三代码后,再敲入:wq,表示保存退出。

62730

基于web的项目资源分配系统

基础功能之上还有一些进阶的功能需求统计的功能,包括排序、过滤、索引、制图,还有UI上的“隐含“要求比如动画、遮罩层、弹窗、字体。...除了这6种批量的变形操作,还可以对某一列某一进行单独操作,比如在侧边栏可以过滤或隐藏列,表头位置可以排序,手动调整列宽和顺序,手动折叠/展开索引等。...分组功能指对所有行进行分类,类似数据库表的索引操作。系统加载时默认只对人名来索引,用户可以通过查找某人快速定位到某一。...当主键单击某一,都会打印这一所对应的内存对象,方便debug。 6.允许排序排序的作用不言而喻,尤其是对索引列的排序至关重要。 7.允许搜索。允许在某一列当中通过关键字搜索某一。...,柱状图和线形图;升级http1.1至二进制传输的http2.0可以大幅提升网络资源的利用率。

4.4K70

《后现代全栈系统的设计与应用》

基础功能之上还有一些进阶的功能需求统计的功能,包括排序、过滤、索引、制图,还有UI上的“隐含“要求比如动画、遮罩层、弹窗、字体。...除了这6种批量的变形操作,还可以对某一列某一进行单独操作,比如在侧边栏可以过滤或隐藏列,表头位置可以排序,手动调整列宽和顺序,手动折叠/展开索引等。...分组功能指对所有行进行分类,类似数据库表的索引操作。系统加载时默认只对人名来索引,用户可以通过查找某人快速定位到某一。...当主键单击某一,都会打印这一所对应的内存对象,方便debug。 6.允许排序排序的作用不言而喻,尤其是对索引列的排序至关重要。 7.允许搜索。允许在某一列当中通过关键字搜索某一。...,柱状图和线形图;升级http1.1至二进制传输的http2.0可以大幅提升网络资源的利用率。

1.1K20

MySQL数据高阶处理技巧:掌握先排序后分组的智慧

在MySQL数据库的数据探索旅程排序和分组是不可或缺的工具。然而,当你面对大量数据、重复值等情况时,常规的处理方法可能显得不够灵活。...本文将为你揭示一个精妙的技巧:如何在MySQL排序,后分组,从而获取每个类型的最新数据,助你轻松驾驭复杂的数据处理任务。...方法一:子查询(5.7版本) 在子查询首先对数据进行排序,然后在外部查询中使用分组操作。这样可以保留排序后的顺序,并在分组后选择特定。...,然后在外部查询按类型进行分组,由于已经排序,每个类型的第一即为最新的记录。...方法二:使用窗口函数(8.0版本) 通过使用窗口函数( ROW_NUMBER())在内部查询为每一分配一个行号,然后在外部查询筛选行号为1的记录。

29930

代码简洁之道:一Python代码解决问题是时尚还是玄学

我认为,Python 一流能够帮助你提高编码技能,值得去学习,其原因还有下面五个。 ◎ 首先,通过提升你对 Python 核心技术的认知,可以克服许多一直在你后腿的编程弱点。...比如说,前面的一流快速排序基于列表解析,但看起来又长又难。下面是一个比较简单的列表解析,用于创建一个平方数的列表。...,以及 range() 函数——所有这些都出现在一简单的 Python 程序!...1  Python温故知新  介绍 Python 的基础知识,让你重新检视自己的 Python 知识。...6  算法  包含了10个一流算法程序,涉及广泛的计算机科学主题,包括拟合、回文、超集、换元、阶乘、质数、斐波那契数列、混淆、搜索和基于算法的排序

44610

个人使用mac OS和win OS的差异

(2) 在某些 App(“日历”或 Safari 浏览器),刷新或重新载入页面。(3) 在“软件更新”,再次检查有没有软件更新。 Shift-Command-C:打开“电脑”窗口。...按住 Command 键移到另一个宗卷:将移的项目移到另一个宗卷,而不是拷贝它。 按住 Option 键移:拷贝托移的项目。移项目时指针会发生变化。...移时按住 Option-Command:为移的项目制作替身。移项目时指针会发生变化。 按住 Option 键点按开合三角:打开所选文件夹内的所有文件夹。这个快捷键仅在列表视图中有效。...点按“访达”菜单栏的“前往”菜单查看用于打开许多常用文件夹(“应用程序”、“文稿”、“下载”、“实用工具”和“iCloud 云盘”)的快捷键。...Control-P:上移一。 Control-N:下移一。 Control-O:在插入点后新插入一。 Control-T:将插入点后面的字符与插入点前面的字符交换。

2.3K20
领券