ag-grid - 如何刷新 ag-grid 数据表？api.refreshCells 遇到问题

问题描述

我正在尝试创建代码以根据示例代码刷新表格。但是，该表并不令人耳目一新。该代码使用更改数据按钮来更改 JavaScript 变量的值，然后在刷新网格时使用该变量。

不幸的是，我无法让网格刷新。我尝试了几种不同的方法，包括 api.refreshCells() 和 api.redrawRows()。有人可以提供有关问题可能是什么的信息吗？

// main.js

let columnsDefinitions = [
    {field: 'a'},
    {field: 'b'},
    {field: 'c'},
    {field: 'd'},
    {field: 'e'},
    {field: 'f'}
];

let data = [
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
];

let gridOptions =
    {
        columnDefs: columnsDefinitions,
        rowData: [],
        enableCellChangeFlash: true,
        onGridReady: function (params)
        {
            params.api.setRowData(data);
        },
        onFirstDataRendered(params)
        {
            params.api.sizeColumnsToFit();
        }
    };

function changeData()
{
    data = [
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    ];
    console.log(data);

    gridOptions.rowData = data;
    gridOptions.api.refreshCells({force : true});

    // Other options I have tried:
    // gridOptions.api.redrawRows();
    // gridOptions.api.redrawRows({rowNodes: data$ArrayDictionary, force: true});
    // gridOptions.api.sizeColumnsToFit();
}

document.addEventListener('DOMContentLoaded',
    () =>
    {
        let gridDiv = document.querySelector('#grid');
        new agGrid.Grid(gridDiv, gridOptions);
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <script> var __basePath = ''; </script>
    <style> html, body { margin: 0; padding: 0; height: 100%; } </style>
    <script src="https://unpkg.com/ag-grid-community@21.0.1/dist/ag-grid-community.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="test-container">
    <div class="test-header">
        <button onclick="changeData()">Change Data</button>
    </div>
    <div id="grid" style="height: calc(100% - 30px);" class="ag-theme-balham-dark"></div>
</div>

<script src="main.js"></script>
</body>
</html>

/* styles.css */

.test-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.test-header {
    padding: 4px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13px;
}

.ag-theme-balham-dark .ag-floating-top {
    background-color: black;
}
.ag-theme-balham-dark .ag-floating-top .ag-row {
    background-color: black;
}
.ag-theme-balham-dark .ag-floating-bottom {
    background-color: black;
}
.ag-theme-balham-dark .ag-floating-bottom .ag-row {
    background-color: black;
}

标签： ag-grid

ag-grid - 如何刷新 ag-grid 数据表？api.refreshCells 遇到问题

问题描述

解决方案

推荐阅读