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还是行数。

        }

更新后的表格：

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