Я разработал электронное приложение, которое будет отображать любой файл .csv с использованием ag-grid. Но если я использую 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, вместо этого используйте 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>