Question

我开发了一个电子应用程序，它将使用ag-grid呈现任何.csv文件的视图。但是，如果我使用gridoptions.api.setRowData（data1），其中data1是一个javascript数组对象。该应用程序将不会显示任何行。

electron应用程序读取.csv文件并将数据保存在javascript数组中。在使用ag-grid时，如果我通过将rowData定义为

而决定从rowData

    data1.forEach(element => {
        rowData.push({
            time:element.Time,
            level:element.Level,
            desc:element.Description,
            logger:element.Logger,
            device:element.ExternalDevice 
        });
    });

在这里，data1是数组，而time / level / desc / logger / device是rowdata的字段。这可以正常工作并在网格中显示数据。

但是，如果我想设计一个更通用的版本，并决定不在rowData中键入文件，请使用gridoptions.api.setRowData（data1）加载数据。这部分不起作用。

    if(data == "MantechPro")
    {
    columnDefs = [
        {
            headerName: "Description", 
            field: "description",
            width: 500,
            minwidth: 200, 
            filter: true
        },
        {
            headerName: "ExternalDevice", 
            field: "externaldevice",
        },
        {
            headerName: "Level", 
            field: "level",
            filter: true
        },
        {
            headerName: "Logger", 
            field: "logger", 
            filter:true
        },
        {
            headerName: "Time", 
            field: "time"
        },
    ];

    var gridOptions = {
    defaultColDef:{resizable: true},
    columnDefs: columnDefs,
    //rowData: rowData,
    pagination: true, 
    paginationPageSize: 20,
    onGridReady: function (params) {
    console.log(data1);
    gridOptions.api.setRowData(data1);
    params.api.sizeColumnsToFit();
    window.addEventListener('resize', function() {
      setTimeout(function() {
        params.api.sizeColumnsToFit();
      })
    })
    }
    };

    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
    gridOptions.api.sizeColumnsToFit();

HTML看起来像这样

    <!DOCTYPE html>
    <html lang="en" style="height:100%;">

    <head>
     <script type="text/javascript" src="node_modules/ag-grid- 
     community/dist/ag-grid-community.js"></script>
     <link rel="stylesheet" href="refresh_button.css">
     <link rel="stylesheet" href="node_modules/ag-grid- 
     community/dist/styles/ag-grid.css"?>
    <link rel="stylesheet" href="node_modules/ag-grid- 
    community/dist/styles/ag-theme-balham.css"?>
    </head>
    <body style="height:100%;">
    <button type="button" id="refresh" class="button button2">Refresh- 
    Data</button>
    <br></br>
    <div id="myGrid" style="height: 80%; width:100%; position: 
    relative;overflow: hidden;" class="ag-theme-balham"></div>
    </div>
    <script type="text/javascript" src="load_agGrid.js"></script>
    </body>

    </html>

Answer 1

我认为您定义列定义的方式是错误的。

数据对象的结构

main()

ColumnDefs的结构

{
    time:element.Time,
    level:element.Level,
    desc:element.Description,
    logger:element.Logger,
    device:element.ExternalDevice 
}

此处def列中的字段应与数据对象中的属性名称匹配

即使在javascript对象打印值之后，ag-grid的Grid API的“ setRowData”方法也不会加载任何行

1 个答案: