【发布时间】：2021-07-18 03:34:13
【问题描述】：
我是 Ag-Grid 的新手。我在 JavaScript 中使用它。我正在学习主/明细网格。
我想知道您是否能够在初始初始化之外使用行数据填充明细网格。
例如，在我的 sn-p 中，我有这样一条语句，它为所有详细网格设置数据：
getDetailRowData: function (params) {
params.successCallback(params.data.callRecords);
}
现在，如果我在网格选项声明中没有该语句怎么办，这将导致我的详细网格没有数据。是否可以在初始网格选项声明之外的详细网格中填充数据，或者可能在单独的函数中填充数据？ 下面的代码sn-p
var gridOptions = {
columnDefs: [
// group cell renderer needed for expand / collapse icons
{ field: 'name', cellRenderer: 'agGroupCellRenderer' },
{ field: 'account' },
{ field: 'calls' },
{ field: 'minutes', valueFormatter: "x.toLocaleString() + 'm'" },
],
defaultColDef: {
flex: 1,
},
masterDetail: true,
detailCellRendererParams: {
detailGridOptions: {
columnDefs: [
{ field: 'callId' },
{ field: 'direction' },
{ field: 'number', minWidth: 150 },
{ field: 'duration', valueFormatter: "x.toLocaleString() + 's'" },
{ field: 'switchCode', minWidth: 150 },
],
defaultColDef: {
flex: 1,
},
},
getDetailRowData: function (params) {
params.successCallback(params.data.callRecords);
},
},
onFirstDataRendered: onFirstDataRendered,
};
function onFirstDataRendered(params) {
// arbitrarily expand a row for presentational purposes
setTimeout(function () {
params.api.getDisplayedRowAtIndex(1).setExpanded(true);
}, 0);
}
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
agGrid
.simpleHttpRequest({
url: 'https://www.ag-grid.com/example-assets/master-detail-data.json',
})
.then(function (data) {
gridOptions.api.setRowData(data);
});
});<link href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css" rel="stylesheet"/>
<link href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css" rel="stylesheet"/>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript example</title>
<meta charSet="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style media="only screen">
html, body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
</head>
<body>
<div id="myGrid" class="ag-theme-alpine" style="height: 100%;">
</div>
<script>var __basePath = './';</script>
<script src="https://unpkg.com/@ag-grid-enterprise/all-modules@25.1.0/dist/ag-grid-enterprise.min.js">
</script>
<script src="main.js">
</script>
</body>
</html>【问题讨论】：
-
不清楚为什么要更新网格配置回调
getDetailRowData之外的数据。您能否提及这样做的目的是什么？ -
是的。在单独的 api 调用中检索详细信息网格的数据。我注意到，对于详细网格，当您使用数据填充详细网格时，它希望其数据与主网格数据一起以单个 json 格式存在。对我来说不是这样，我需要再次调用 api 来获取详细的网格数据
标签： javascript html grid ag-grid