我开发了一个 Electron 应用程序，它将使用 ag-grid 呈现任何 .csv 文件的 View 。但是如果我使用 gridoptions.api.setRowData(data1) ，其中 data1 是一个 javascript 数组对象。该应用程序不会显示任何行。
Electron 应用程序读取 .csv 文件并将数据保存在 JavaScript 数组中。在使用 ag-grid 时，如果我决定通过将 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>
最佳答案
我认为您定义列定义的方式是错误的。
数据对象的结构
{
time:element.Time,
level:element.Level,
desc:element.Description,
logger:element.Logger,
device:element.ExternalDevice
}
ColumnDef的结构
columnDefs = [
{
headerName: "Description",
field: "desc",
width: 500,
minwidth: 200,
filter: true
},
{
headerName: "ExternalDevice",
field: "device",
},
{
headerName: "Level",
field: "level",
filter: true
},
{
headerName: "Logger",
field: "logger",
filter:true
},
{
headerName: "Time",
field: "time"
},
];
此处 def 列中的字段应与数据对象中的属性名称匹配
关于javascript - 即使 javascript 对象打印值后，ag-grid 的 Grid API 中的 "setRowData"方法也不会加载任何行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56135600/