Question

我正在尝试创建代码以根据示例代码刷新表。但是，该表未刷新。该代码使用“更改数据”按钮来更改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;
}

Answer 1

您没有正确更新网格数据。您需要在网格setRowData上使用api方法来更新表中的所有数据。

看看ag-grid文档here中更新网格数据的不同方法。

here是您的问题的有效示例。

Answer 2

有2个选项：update或refreshCells

1)
  const row = this.yourList[index]
  this.gridApi.applyTransaction({ update: [row] })
2)        

  this.gridApi.refreshCells({force : true});

如何刷新农业网格数据表？ api.refreshCells遇到问题

2 个答案: