ag-grid 表格数据更新

最新推荐文章于 2024-05-10 10:00:51 发布

前端菜鸟来报道

最新推荐文章于 2024-05-10 10:00:51 发布

阅读量5.4k

点赞数 1

分类专栏： ag-grid 文章标签： ag-grid

本文链接：https://blog.csdn.net/WQearl/article/details/120997578

版权

ag-grid 专栏收录该内容

15 篇文章 29 订阅

订阅专栏

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

最初的表格数据如下图：

一更新整个表格的数据

使用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的ID
            new agGrid.Grid(eGridDiv, gridOptions);
        });

    </script>
</body>

</html>

前端菜鸟来报道

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
ag-grid 表格数据更新

有时候我们会涉及到数据更新，但是又不想刷新整个页面，那么就可以单独对表格中的数据进行更新。以下有三种更新情况：表格整个数据的更新；更新一行数据；更新单元格数据。最初的表格数据如下图：一更新整个表格的数据使用setRowData方法。 function resetGrid() { //新的数据项 const Newdata = [ { id: "dd", name: '...
复制链接

扫一扫

专栏目录