AG网格-在不使用JSON文件的情况下将数据行添加到Master Detail

Question

我想知道如何将数据行添加到主细节表中，但不使用外部json文件，只需通过JS 内联写入行记录

任何人都知道如何进行

https://www.ag-grid.com/documentation/javascript/master-detail/

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', minWidth: 150 },
{ field: 'number' },
{ field: 'duration', valueFormatter: "x.toLocaleString() + 's'" },
{ field: 'switchCode', minWidth: 150 },
],
defaultColDef: {
flex: 1,
},
},
getDetailRowData: function (params) {
// simulate delayed supply of data to the detail pane
setTimeout(function () {
params.successCallback(params.data.callRecords);
}, 1000);
},
},
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
// I dont want to use the external json file
agGrid
.simpleHttpRequest({
url: 'https://www.ag-grid.com/example-assets/master-detail-data.json',
})
.then(function (data) {
gridOptions.api.setRowData(data);
});
});

Answer 1

将gridOptions上的rowData字段设置为：

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,
rowData: myData
};

在这种情况下，myData看起来是这样的：

var myData = [
{
name: 'Nora Thomas',
account: 177000,
calls: 24,
minutes: 25.65,
callRecords: [
{
name: 'susan',
callId: 555,
duration: 72,
switchCode: 'SW3',
direction: 'Out',
number: '[phone]',
},
],
},
];

演示。