ag-grid refreshCells刷新更新数据

我们通常会遇到这样一个情景，选中表格中的一行点击编辑，弹出对话框修改完数据后更新表格选中行的数据，ag-grid可以通过refreshCells方法来更新表格显示的数据（也可以通过updateRowData updateRowData）更新。

影响范围

方法	说明	应用场景
updateRowData	整个表格更新	分页加载的全部数据
updateRowData	整行数据更新	选中行弹出层，编辑表单
refreshCells	单元格更新	双击单元格进行编辑更新数据

代码例子

//更新第一行数据 rowData为行数据
 rowData[i].name = 'good';
 var params = {
        force: true
    };
 gridOptions.api.refreshCells(params);

在线试一试

完整例子

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ag-grid refreshCells例子</title>
    <script src="https://www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
    <link href="https://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" />
</head>
<body>
    <div style="margin-bottom: 10px;">
        <input type="button" value="更新" onclick="func1()" />
    </div>
    <div id="itxst" style="width: 100%;height: 300px;" class="ag-theme-balham"></div>
    <script>
        //定义列
        var colData = [
            { headerName: '名称', field: 'name', 'pinned': 'left' },
            { headerName: '库存', field: 'col2' },
            { headerName: '销量', field: 'col3' },
        ];

        //行数据
        var rowData = [
            { name: 'itxst.com', col2: 12921, col3: 23312 }
        ];

        //多模拟几行数据出来
        for (var i = 1; i < 10; i++) {
            rowData.push({ name: 'KU-' + i, col2: 612 * i, col3: 321 * i });
        }

        //将列和数据赋给gridOptions
        var gridOptions = {
            columnDefs: colData,
            rowData: rowData,
            enableCellChangeFlash: true,
            onGridReady: function () {
                gridOptions.api.sizeColumnsToFit();
            },
            defaultColDef: {
                enableRowGroup: true,
                enablePivot: true,
                enableValue: true,
                sortable: true,
            }
        };
        //在dom加载完成后 初始化agGrid完成
        document.addEventListener("DOMContentLoaded", function () {
            var eGridDiv = document.querySelector('#itxst');
            new agGrid.Grid(eGridDiv, gridOptions);
        });

        //更新第一行数据
        function func1() {
            rowData[0].name = 'good';
            var params = {
                force: true
            };
            gridOptions.api.refreshCells(params);
        }
    </script>
</body>
</html>