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

如果使用Angular 6的ag-Grid执行整行更新,则获取已编辑的列(包含数据

在使用Angular 6的ag-Grid执行整行更新时,获取已编辑的列(包含数据)可以通过以下步骤实现:

  1. 首先,在Angular组件中引入ag-Grid模块,并初始化一个ag-Grid实例。确保在HTML模板中包含ag-Grid的容器。
代码语言:txt
复制
import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent {
  gridOptions: GridOptions;
  rowData: any[];

  constructor() {
    this.gridOptions = <GridOptions>{
      // 配置ag-Grid的一些属性
    };
  }

  // 初始化ag-Grid的列定义和行数据
  onGridReady(params) {
    this.gridOptions.api.setColumnDefs(this.createColumnDefs());
    this.gridOptions.api.setRowData(this.rowData);
  }

  // 创建列定义
  createColumnDefs() {
    return [
      // 定义各列的属性,如字段名、标题、编辑器等
    ];
  }

  // 获取已编辑的列
  getEditedColumns() {
    const editedColumns = [];
    const allColumns = this.gridOptions.columnApi.getAllColumns();

    allColumns.forEach(column => {
      if (column.isCellEditable()) {
        const colDef = column.getColDef();
        const field = colDef.field;
        const newValue = this.gridOptions.api.getValue(column, column.getRowNode());
        editedColumns.push({ field, newValue });
      }
    });

    return editedColumns;
  }
}
  1. 在HTML模板中,将ag-Grid绑定到组件的gridOptions,并在ag-Grid中设置onGridReady事件回调函数。
代码语言:txt
复制
<ag-grid-angular
  style="width: 100%; height: 100%;"
  class="ag-theme-alpine"
  [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>
  1. 在getEditedColumns方法中,通过调用ag-Grid的API来获取已编辑的列。首先,使用columnApi的getAllColumns方法获取所有列,然后遍历每一列,判断是否可编辑。如果是可编辑的列,获取列定义(colDef)中的字段名(field),并使用api的getValue方法获取该列在行数据中的新值。最后,将字段名和新值存储在一个数组中,并返回。

使用以上步骤,就可以在Angular 6的ag-Grid中获取已编辑的列(包含数据)了。这样的功能在需要对用户进行数据更新或持久化时非常有用,比如保存用户对表格数据的修改或向后端提交修改后的数据。

推荐的腾讯云相关产品:腾讯云Serverless云函数(https://cloud.tencent.com/product/scf)

请注意,本回答中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等品牌商。如需了解更多腾讯云的云计算产品,可访问腾讯云官网(https://cloud.tencent.com/)获取详细信息。

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

相关·内容

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

跨平台:通过简单点击即可将您创作完成的项目导出至各种流行操作系统与设备。 免费开源:使用极其自由放任度很高 MIT 许可证发布,并得到社区驱动式维护与更新。...ag-grid/ag-grid[2] Stars: 10.2k License: NOASSERTION picture AG Grid,是一个功能齐全且高度可定制的 JavaScript 数据表格。...它支持 React / Angular / Vue / 纯 JavaScript,并提供了标准网格所需的所有特性,如列交互、分页、排序和行选择等。...此外,AG Grid 还具有以下突出特点: 分组/聚合 可访问性支持 自定义过滤器 原地单元格编辑 记录懒加载 服务器端记录操作 实时流更新 与其他数据表不同之处在于 AG Grid 具有完整的自定义能力和灵活性...可以同时在所有 Web 应用中输入底部键入的内容,但如果您想进一步探索其中之一,则可以独立进行操作,因为它们只是 webview。

57310
  • 基于 Angular Material 的 Data Grid 设计实现

    data-grid.jpg 自 Extensions 组件库发布以来,Data Grid 成为了使用及咨询最多的组件。...说点题外话,开发一款插件最大的难度不在于功能的实现,而在于如何去设计插件。 什么是 Data Grid? Data Grid 本质上就是通过 数据+列定义+配置项 来渲染表格的插件。...column hiding(列的显示隐藏) checkbox selection(数据选择) row selection(行选取,可多选) cell selection(单元格选取,暂时支持单选) expandable...row(可展开的表格行) customized cell(自定义单元格) column moving(列的移动排序) Data Formatting(数据格式化) Template(各种模板) 因文章篇幅有限...如果初始化表格时希望默认选中某些行,则只需要定义 [rowSelected]=[...]。 不可选取 ?

    5.1K20

    nodejs基础-

    应用程序) 六、nodejs安装配置 官网下载 自动安装 校验是否安装成功: node -v 环境变量会自动配置,如果现实不是内部命令或者外部命令,则配置环境变量 环境变量的意义,当执行某个程序时候...,先在当前目录查找, 如果有该程序,则执行,如果没有,到环境变量里面找,有则执行 七、nvm-windows管理一台计算机上的多个node版本 ?...F2 下一个书签 Shift+F2 上一个书签 shift+鼠标右键 列选择 Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑 Alt+....ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找 Ctrl+Shift+K 删除整行 Ctrl+Shift+L 鼠标选中多行(按下快捷键),即可同时编辑这些行...使用方法:使用快捷键ctrl+alt+f 6.

    2.5K30

    20多个好用的 Vue 组件库,请查收!

    同时,支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作。 此外,它还适用于React、Angular和Vue。...特点 多列排序 非连续选择 过滤数据和验证数据 导出文件 有条件的格式化 合并单元格 隐藏行/列 上下文菜单和注释 Ag Grid Vue 地址:https://github.com/ag-grid/...Ag-Grid 是一个基于Vue.js的数据表格组件。其中,“ag” 表示 “agnostic”。内部 ag-Grid引擎是在TypeScript中实现的,零依赖关系。...Vue-Good-Table是一个基于Vue.js的数据表组件,简单、干净,具有排序、列过滤、分页等更多基本功能。...个人感觉Font Awesome的图标还是很齐全的,绝大多数的图标它都包含了,而且支持各种框架。

    7.6K10

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

    和excel导出有关的模块是表格交互模块。 4.2 编辑与设置 4.2.1 对象增删改查 更新包含增,删,改,其中增与改对应的http方法是post和put[11]。...其中,update和remove分别对应着更新和删除操作,而且会弹出包含编辑器的对话框,还可以在表格右半部分的嵌入式编辑器中直接修改员工的数据。...框架提供了动画效果,当用户拖拽,缩放表格的时候都会出现相应的渐变动画,使得操作效果更友好直观。 3.整行嵌入式编辑。除了group行,每一行都可以直接在行内使用文本框和选择器编辑文本和数字。...双击或者任意字符键打开编辑器,编辑完整行数据后回车或失去焦点即完成编辑,触发事件,发送到服务器更新。 4.允许分组。分组功能指对所有行进行分类,类似数据库表中的索引操作。...下;然后检查当前数据库中是否已经存在所需要的5个集合,如果没有则创建出来;之后对person的_department和project集合的_type列添加索引(如果存在则不变);最后根据cfg中保存的schema

    4.5K70

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

    和excel导出有关的模块是表格交互模块。 4.2 编辑与设置 4.2.1 对象增删改查 更新包含增,删,改,其中增与改对应的http方法是post和put[11]。...其中,update和remove分别对应着更新和删除操作,而且会弹出包含编辑器的对话框,还可以在表格右半部分的嵌入式编辑器中直接修改员工的数据。...框架提供了动画效果,当用户拖拽,缩放表格的时候都会出现相应的渐变动画,使得操作效果更友好直观。 3.整行嵌入式编辑。除了group行,每一行都可以直接在行内使用文本框和选择器编辑文本和数字。...双击或者任意字符键打开编辑器,编辑完整行数据后回车或失去焦点即完成编辑,触发事件,发送到服务器更新。 4.允许分组。分组功能指对所有行进行分类,类似数据库表中的索引操作。...下;然后检查当前数据库中是否已经存在所需要的5个集合,如果没有则创建出来;之后对person的_department和project集合的_type列添加索引(如果存在则不变);最后根据cfg中保存的schema

    1.1K20

    我是如何爱上ag-grid框架的

    与每个管理系统一样,我们需要选择一个网格来显示我们的数据,而我的前任已经在应用程序中使用了两个网格 -  ag-Grid(v2.7)和Ng-Table(v0.8.3) - 我热情地讨厌前者。...我及时检查了源代码,发现ag-Grid有一个column定义字段,其中包含我真正需要的所有内容。这伴随着排序,过滤,固定和最重要的 - 分组,聚合以及拥有所需数量的行的能力。...系统上的每种管理员现在都可以创建包含与其相关的数据的报告,并保存配置以供将来使用,并且它每天节省大约30分钟,为公司的某个部门创建一些组成的报告。成功。...后来,我添加了自己的数据虚拟化(在ag-Grid上重构之前)并且享受了网格API提供的一些很酷的东西。完成后,CRM的开发很快。...每个新页面至少有一个表,添加/编辑/删除行,我只是通过布尔的开关以编程方式控制。生活很棒,我不能完全感谢这个网格。

    6.2K40

    如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    用户在设计器中进行更改后,只需单击一下,就可以使用修改后的Angular标记更新原始HTML文件。...例如,您可以使用IntelliSense为新控件创建Angular标记,然后使用可视化设计器编辑标记。...对于具有集合的控件(例如网格列),设计器允许您添加,删除和修改单个成员。 在“属性”窗格中找到columns属性,然后单击属性编辑器右侧的“显示项目”按钮以显示Angular标记中定义的八个列。...否则,如果您只是切换到设计器选项卡并单击“保存”,则更新可能发生在错误的位置。...,生成的标记包含表示Y轴,图表图例,三个数据系列和趋势线的子元素。

    5.4K40

    19K Star大公司都在用的开源电子表格组件

    Handsontable可以与主流框架如React、Angular和Vue等一起使用,并支持数据绑定、数据验证、排序、增删改查以及上下文菜单等功能。...移动行/列:允许用户自由调整行或列的位置,以便更好地组织数据。 调整行高/列宽:可以自定义调整行高或列宽,适应不同的数据展示需求。 隐藏行/列:可以隐藏某些行或列,使界面更简洁。...使用的大客户名单 全球大公司都在用 使用场景 Handsontable适用于许多业务场景,特别适合于中后台管理系统的开发和使用,常见的使用场景包括: 数据展示和管理:用于展示和管理大量数据,进行排序、筛选...数据输入和编辑:支持用户进行数据输入和编辑,提供数据验证等功能。 报表和分析:用于生成报表、进行数据分析和可视化,提供复杂的表格展示。...实时协作编辑:支持多用户同时对一个表格进行编辑和交互,适用于协作办公环境。 Handsontable为开发者提供了一个功能丰富、易用灵活的数据网格组件,为各种业务需求提供了便捷的解决方案。

    41611

    教程|在 Angular 4 中加载功能模块(下)

    Currency 模块的配置完全相同。 当路由器导航到更新后的地址时,它会使用 loadChildren 字符串动态加载 WeatherModule 或 CurrencyModule。...然后该路径立即可供后续请求使用。 更新 UI 接下来,将会更新用户界面。在您的应用程序目录中找到文件 app.component.html,将光标放在以下语句下方: 清单 3....现在检查执行 ng serve 命令后的应用程序输出。您会看到两个针对 “chunk” 文件的新行,它们是被 angular-cli 自动添加的。这些行表示您惰性加载的模块。...参见图 11(第 3 列)和图 12(第 3 列),您现在应看到 Weather 模块 (module(x.chunk.js)) 也已加载。...原始 app-routing.module.ts 的一节 JavaScript import { Routes, RouterModule } from '@angular/router'; 清单 6.

    2.3K10

    AgGrid框架的使用感受及前景分析

    免责声明:文章源于本人闲情雅致,没有任何广告意图 我向来是不屑于使用前端框架的,最多用一些ui组件,但是ag-grid这个框架太TM好用了。...著名的前端框架ag-grid就是在这个理论上诞生的。 简而言之,表格即图表,图表即表格,它们在数据上是一致的,只是表现形式不同而已。...例如,使用“ table”,“ tr”和“ td”标签时,将1000条带有20列的记录加载到浏览器中,则该页面最终将带有许多呈现的DOM元素。这将大大降低网页速度。...例如,如果您将1,000条记录和20列加载到网格中,但用户只能看到50条记录和10列(因为其余的未滚动到视图中),则网格仅呈现用户的50行和10列可以实际看到。...在使用AgGrid的时候不要把它看成一个表格,把它想象成一个关系型数据库,用关系代数的思想来操作它,就会发现,无论是表格还是统计图都是一样的逻辑。

    6K40

    将文件系统作为数据库的体验如何?

    CSV with ag-grid & chart.js 功能概述 基于web的表格处理/图形渲染系统, 支持csv文件的导入导出, ag-grid的本地scrud, 以及chart.js框架的图表统计...CSV规范格式 能够读取的CSV格式必须符合通用标准,比如首行必须是表头,第二行开始是数据,可以有跨行单元格(系统会向上寻找到存在的元素并拷贝),系统自动识别数值类型并转化,但并不识别数值列....前后端模块一览 ag-grid(enterprise): 不用说了, 所见过最强大, 最良心, 文档最完善的网格框架 chart.js: 一种轻量级的统计图框架, 支持八种图表 CryptoJS: js...绘图逻辑 每个一级group node制作一张线形图(贝塞尔曲线),如果它有二级group node(children),则作为图中的的多个曲线; 如果没有,则将自身作为唯一的曲线 主菜单一览 import...: 将本地csv文件导入到浏览器中进行计算和渲染 upload: 上传本地csv文件备份到服务器的文件系统 server: 打开服务器文件系统 export: 将浏览器中编辑后的新表格导出为csv文件

    3K20

    用FlexGrid做开发,轻松处理百万级表格数据

    表格数据处理是我们项目开发中经常会遇到的设计需求之一,所需处理的数据量也较大,通常是万级、甚至百万级。此时,完全依赖平台自带的表格工具,往往无法加载如此大的数据量,或者加载得很慢影响程序执行。...那么,有没有好的开发工具,能实现加载大量数据的需求,同时不影响程序执行?...比如调整列宽、调整行高、自适应匹配最佳列宽、自适应匹配最佳行高、通过下拉窗口选择单元格的数据、通过可视化日期控件或计算器控件指定单元格的值。 ?...用户不仅可以简单过滤出想要的人名或者地区,还可以引入复杂的业务逻辑如获取销售额超过300万的分店列表,并配合排序、分组和汇总等功能更清晰的呈现出各种KPI数据。...Wijmo5 FlexGrid教程(18)- 实现添加ToolTip提示功能 Wijmo5 FlexGrid教程(19)- 用Angular2在客户端导入导出Excel FlexGrid 包含在全能控件套包

    2.5K80

    精通Excel数组公式14:使用INDEX函数和OFFSET函数创建动态单元格区域

    下面列出了一些触发重新计算的操作: 1.输入新的数据 2.删除/插入行/列 3.执行自动筛选 4.双击行列分隔线 5.重命名工作表 6.改变工作表的位置 下面列出了一些易失性函数:CELL函数,INDIRECT...INDEX:查找行或列的公式 创建动态单元格区域的最基本的公式类型是基于条件来查找整行或整列值,可以使用INDEX函数实现。...通过指定参数row_num为空或0,告诉Excel返回所选列的所有行。 同理,想要获取整行,则需要指定参数row_num的值代表行号,将参数column_num指定为空或0。...2.如果想要传递多个值到多个单元格,则必须使用Ctrl +Shift + Enter。...图2:对于不同数据类型查找最后一行 在图2所示的公式[2]至[6]中,展示了一种近似查找值的技术:当要查找的值比单元格区域中的任何值都大且执行近似匹配(即MATCH函数的第3个参数为空)时,将总是获取列表中最后一个相对位置

    9.3K11

    个人永久性免费-Excel催化剂功能第32波-行列批量插入和删除

    操作步骤为: 选择包含空单元格的区域 点击删除空行(选区)按钮 ? 只先择两列,最终删除也只有这两列的空单元格 ?...删除后的效果,C列的空单元格不被删除 删除空行,整行删除 操作方式和上述按选区类似 ? 只选择两列数据时,按整行删除 ?...第5波-使用DAX查询从PowerbiDeskTop中获取数据源 第6波-导出PowerbiDesktop模型数据字典 第7波-智能选区功能 第8波-快速可视化数据 第9波-数据透视表自动设置 第10...Excel催化剂插件使用最新的布署技术,实现一次安装,日后所有更新自动更新完成,无需重复关注更新动态,手动下载安装包重新安装,只需一次安装即可随时保持最新版本!...Excel催化剂插件下载链接:https://pan.baidu.com/s/1gC6joqGY_SIg_yONga9PaQ 因插件使用VSTO开发技术完成,插件的安装需要电脑满足相关的环境配置才能运行

    2.1K20

    七、文章管理页面及功能实现《iVX低代码无代码个人博客制作》

    ,一个用于文章删除一个用于文章编辑: 统一设置他们的圆角取消、宽度100%,以及文本更改: 二、文章删除功能实现 删除文章一般并不是真正的在数据库中对数据进行删除,我们一般使用一个字段标记内容是否删除...ID,随后在逻辑中选择对应的数据库,随后选择数据库进行有条件的字段更新,设置对应的是否删除为1即可,如果更新成功返回1表示成功否则直接返回失败原因即可: 三、获取当前作者文章 此时要删除文章数据我们还需要获取当前作者的文章数据...: 那么此时完成后还需要对应的在当前页面做出响应,直接在当前页面循环文章的文章数据对象数组中删除对应 ID 的一行数据即可,所以此时在完成删除动作后,判断是否成功,如果成功就删除对象数组的内容即可:...,此时更改获取服务: 四、文章编辑页及功能制作 接着我们复制一个文章发布页作为文章编辑页: 重命名该页,并且更新发布按钮为更新: 接着创建一个编辑ID变量存储选择编辑的文章: 回到管理页,当我们点击了编辑后...,传入对应参数即可: 最后我们更改标题: 点击更新之后成功更新: 最后首页显示内容已更改:

    54430

    【17】进大厂必须掌握的面试题-50个Angular面试

    您需要手动编写自定义代码,以便在每次视图更改时对其进行更新。 而在双向数据绑定中,一旦更改数据模型,则隐式更新View或UI部分。与单向数据绑定不同,这是一个同步过程。...35.什么是Angular中的包含? Angular中的包含可让您将指令的原始子代转移到新模板内的特定位置。ng指令指示正在使用包含的最近父指令的已包含DOM的插入点。...因此,如果您不使用“ new Object()”而未将其设为单例,则将为同一对象分配两个不同的存储位置。而如果将该对象声明为单例,则如果该对象已存在于内存中,则将简单地将其重用。...有角的。大写: 将字符串转换为大写字符串。 有角的。isString: 如果当前引用是字符串,则返回true。 有角的。isNumber:如果当前引用为数字,则返回true。...如果您的数据模型是在”区域”之外更新的,请说明该过程,您将如何查看视图?

    41.5K51

    前端原生开发解决方案

    -- 等同于 --> 今天的日期是:12/19/2021 数据绑定 数据到样式的单向绑定,通过按需更新 CSS 全局变量实现,如若需要修改元素的文本值则必须通过选择器来查找元素...兼容性 使用原生开发的应用在兼容上不如使用框架,因为无论 Vue、React、Angular 都偏向使用古老的语法和接口从而保证向下兼容旧版浏览器,但代价是代码量的翻倍,使用原生开发,并尽可能采用最新的语法和接口能够大大提升性能...然后,不到万不得已别使用 SSR 服务端渲染,引入 SSR 给整个生产线增加了一层“构建时”,增加了调试成本。...,然后随时通过字体设计软件来编辑它————后者在发布的时候无须删除任何多余文件,更加方便。...仓库目录结构 待定 常用组件 下面列举常用的组件,对于那些很简单的组件,本仓库都提供了样例代码,稍微复杂点的组件(表格、图表)则使用我推荐的轻量框架。

    1.5K30
    领券