ag-grid 表格数据更新

有时候我们会涉及到数据更新，但是又不想刷新整个页面，那么就可以单独对表格中的数据进行更新。以下有三种更新情况：表格整个数据的更新；更新一行数据；更新单元格数据。

最初的表格数据如下图：

一更新整个表格的数据

使用setRowData方法。

        function resetGrid() {//新的数据项const Newdata = [{ id: "dd", name: '小d', sex: '女', age: '5' },{ id: "ee", name: '小m', sex: '男', age: '35' },{ id: "ff", name: '小h', sex: '男', age: '11' }];//调用接口重新设置数据gridOptions.api.setRowData(Newdata);}

更新后的表格：

二更新行数据

1.使用setData方法。

        function bySetRows() {//  #region 指定更新第几行的数据  // const rowNode = gridOptions.api.getRowNode(3);//获取表格第3行数据节点// //需要更新的数据// const newRow = {//     id: "dd",//     name: '更新的行',//     sex: '无性别',//     age: 10000000000// };// rowNode.setData(newRow);//   #endregion  // --------------------------------------------------------------------------------------------------- //  #region 根据列中的id更新数据  //步骤：首先在源数据中，需要有id这一列；其次，在gridOptions定义中需要有getRowNodeId方法；最后，再根据id获取需要更新的节点；以上三个步骤缺一不可const rowNodeByID = gridOptions.api.getRowNode("dd");//获取id为dd的数据行//需要更新的数据const newRowById = {id: "dd",name: '更新的行',sex: '无性别',age: 10000000000};rowNodeByID.setData(newRowById); // 设置数据//   #endregion  /* 注意： 以上两种方式跟getRowNode这个函数的入参类型有两种（数字和字符串），对应着 getRowNodeId 函数的使用，一定不能搞反了。当为指定更新行数：getRowNode入参为数字型（具体第几行），并且getRowNodeId方法一定不能写（需要注释掉），否则getRowNode获取数字型参数就会失效，导致获取不到对应行；当为根据id更新数据：getRowNode输入的是字符串（具体id），那就一定需要 getRowNodeId 函数， 否则getRowNode获取数字型参数也会失效 */}

更新后的表格：

2.使用updateRowData方法（可以进行批量更新）

        function byRowNode() {const selRow = gridOptions.api.getSelectedRows(); //获取选中的行if (selRow.length <= 0) {alert("请选中一行数据");return;}for (var index = 0; index < selRow.length; index++) {selRow[index].name = '哈哈哈哈哈哈';selRow[index].sex = "不男不女"}gridOptions.api.updateRowData({update: selRow});}

更新后的表格：

三更新单元格的数据

使用setDataValue方法：

        function updateCellData() {//  "dd" 为数据中的id,根据id获取需要更新的行var rowNode = gridOptions.api.getRowNode("ee");//  age:需要修改的字段name; 12:应该设置的数据rowNode.setDataValue('age', "12");//  注意：getRowNode的用法和上面更新行数据中的用法一致，要区分入参是id还是行数。}

更新后的表格：

以上所呈现的效果所有代码如下：

<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>表格数据更新</title><script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script><!-- <script src="https://unpkg.com/@ag-grid-community/all-modules@26.1.0/dist/ag-grid-community.min.js"> --><!-- </script> --></head><!-- 此页面包含功能：重设表格数据--><body><input type="button" value="重设整个表格的数据" onclick="resetGrid()" /><input type="button" value="更新指定行数据" onclick="bySetRows()" /><input type="button" value="更新选中行的数据" onclick="byRowNode()" /><input type="button" value="更新某个单元格的内容" onclick="updateCellData()" /><div id="myGrid" style="width: 100%;height: 500px; ;margin-top: 10px;" class="ag-theme-alpine"></div><script>//定义表格列const columnDefs = [{headerName: '姓名',field: 'name','pinned': 'left',checkboxSelection: true,headerCheckboxSelection: true}, {headerName: '性别',field: 'sex'}, {headerName: '年龄', field: 'age'}];const data = [{ id: "aa", name: '小明', sex: '男', age: '100' },{ id: "bb", name: '小花', sex: '女', age: '5' },{ id: "cc", name: '小张', sex: '男', age: '100' },{ id: "dd", name: '小蓝', sex: '女', age: '5' },{ id: "ee", name: '小华', sex: '男', age: '35' }];const gridOptions = {columnDefs: columnDefs,rowData: data,onGridReady: function () {gridOptions.api.sizeColumnsToFit();},getRowNodeId: function (data) {return data.id;},rowSelection: 'multiple'};/*************************************************1.重设整个表格的数据：setRowData**********************************/function resetGrid() {//新的数据项const Newdata = [{ id: "dd", name: '小d', sex: '女', age: '5' },{ id: "ee", name: '小m', sex: '男', age: '35' },{ id: "ff", name: '小h', sex: '男', age: '11' }];//调用接口重新设置数据gridOptions.api.setRowData(Newdata);}/**************************************************2.更新行的数据******************************************************/// ag-grid 官网地址：https://www.ag-grid.com/javascript-data-grid/data-update-single-row-cell/ //方法一 ：通过setData更新,首先获取需要更新的节点function bySetRows() {//  #region 指定更新第几行的数据  // const rowNode = gridOptions.api.getRowNode(3);//获取表格第3行数据节点// //需要更新的数据// const newRow = {//     id: "dd",//     name: '更新的行',//     sex: '无性别',//     age: 10000000000// };// rowNode.setData(newRow);//   #endregion  // --------------------------------------------------------------------------------------------------- //  #region 根据列中的id更新数据  //步骤：首先在源数据中，需要有id这一列；其次，在gridOptions定义中需要有getRowNodeId方法；最后，再根据id获取需要更新的节点；以上三个步骤缺一不可const rowNodeByID = gridOptions.api.getRowNode("dd");//获取id为dd的数据行//需要更新的数据const newRowById = {id: "dd",name: '更新的行',sex: '无性别',age: 10000000000};rowNodeByID.setData(newRowById); // 设置数据//   #endregion  /* 注意： 以上两种方式跟getRowNode这个函数的入参类型有两种（数字和字符串），对应着 getRowNodeId 函数的使用，一定不能搞反了。当为指定更新行数：getRowNode入参为数字型（具体第几行），并且getRowNodeId方法一定不能写（需要注释掉），否则getRowNode获取数字型参数就会失效，导致获取不到对应行；当为根据id更新数据：getRowNode输入的是字符串（具体id），那就一定需要 getRowNodeId 函数， 否则getRowNode获取数字型参数也会失效 */}//方法二：通过updateRowData更新 function byRowNode() {const selRow = gridOptions.api.getSelectedRows(); //获取选中的行if (selRow.length <= 0) {alert("请选中一行数据");return;}for (var index = 0; index < selRow.length; index++) {selRow[index].name = '哈哈哈哈哈哈';selRow[index].sex = "不男不女"}gridOptions.api.updateRowData({update: selRow});}/**************************************************3.更新单元格的数据******************************************************/// ag-grid 官网地址：https://www.ag-grid.com/javascript-data-grid/data-update-single-row-cell/ // 更新某个单元格的内容，主要可以用于修改数据之后，不刷新页面，就可以更新被修改的单元格。function updateCellData() {//  "dd" 为数据中的id,根据id获取需要更新的行var rowNode = gridOptions.api.getRowNode("ee");//  age:需要修改的字段name; 12:应该设置的数据rowNode.setDataValue('age', "12");//  注意：getRowNode的用法和上面更新行数据中的用法一致，要区分入参是id还是行数。}//在dom加载完成后 初始化agGrid完成document.addEventListener("DOMContentLoaded", function () {const eGridDiv = document.querySelector('#myGrid');  //myGrid 是容器div的IDnew agGrid.Grid(eGridDiv, gridOptions);});</script>
</body></html>

ag-grid 表格数据更新相关推荐

Kendo UI grid 表格数据更新
1.整行数据更新 //获取grid表格var table0 = $(updateTableID).data("kendoGrid");//删除第一条 var lastTableDa ...
Ag Grid 表格树 Vue Data Grid: Tree Data
目录 Tree Data 模式提供 Tree Data 配置组列 Auto Column Group Custom Column Group 示例:组织层次结构填充组 Tree Data 聚合(合 ...
ExtJS4.2学习(三)Grid表格（转）
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/172.html --------------- ...
ExtJs 日期相加，Grid表格列可编辑
1.日期相加: Ext.Date.add(new Date(), Ext.Date.DAY, 15) 2.Grid表格列可编辑: { header : "实际已交货量", ...
Grid表格的js触发事件
没怎么接触过Grid插件: 解决的问题是:点击Grid表行里的内容触发js方法弹出模态框,用以显示选中内容的详细信息. 思路:给准备要触发的列加上一个css属性,通过这个css属性来获取元素并触发js ...
php liger 表格排序,LigerUI之grid表格点击表头标题排序实现
LigerUI之grid表格点击表头标题排序实现: 通过ajax方式加载数据之后,点击表头排序两种方式实现. 第一种: grid.set({ dataAction: 'local', url: '', ...
jqGrid与Struts2的结合应用（一） —— 显示基本Grid表格
原文地址:http://blog.csdn.net/gengv/article/details/5714834 如不能转载,请联系博主,我马上删除. 根据jqGrid的文档,要想生成一个jqGrid, ...
火狐、IE浏览器实现Extjs的grid表格的复制、粘贴
2019独角兽企业重金招聘Python工程师标准>>> 从后台获取参数,一次填入ext:grid网状表格,发现表格内的数据不能复制粘贴,只能read...,火狐和IE 11都不能复制 ...
wpf怎么让grid表格中元素显示到最顶层_一文搞定PPT中的快捷键
点击上方"锦乡悦堂",一起愉快的学习吧! 不知道大家有没有见到过会PS的同学工作时的场景:一手鼠标移动.指点,另一手在键盘上噼里啪啦按键,屏幕上肉眼可见的速度出现了他们的作品. 操 ...

ag-grid 表格数据更新

ag-grid 表格数据更新相关推荐

最新文章

热门文章