Javascript 如何使用行上的数据填充指定的详图网格单击

我是Ag网格的新手。我正在JavaScript中使用它。我正在学习主/明细栏。
我想知道您是否能够在初始初始化之外使用行数据填充明细栏
例如，在我的代码片段中，我有一条语句，它为所有细节网格设置数据：

getDetailRowData: function (params) {
      params.successCallback(params.data.callRecords);
    }

现在，如果网格选项声明中没有该语句，会导致我的详细网格没有数据。是否可以在初始网格选项声明之外的详细网格中填充数据，或者可能在单独的函数中填充数据？？ 下面的代码片段

var gridOptions={
columnDefs：[
//展开/折叠图标所需的组单元渲染器
{字段：'name'，cellRenderer:'agGroupCellRenderer'}，
{字段：'帐户'}，
{字段：'调用'}，
{字段：'minutes'，valueFormatter:'x.toLocaleString（）+'m'}，
],
默认值f：{
弹性：1，
},
细节：没错，
DetailCellRenderParams：{
详细网格选项：{
columnDefs：[
{字段：'callId'}，
{字段：'方向'}，
{字段：'number'，最小宽度：150}，
{字段：'duration'，valueFormatter:'x.toLocaleString（）+'s'}，
{字段：'switchCode'，最小宽度：150}，
],
默认值f：{
弹性：1，
},
},
getDetailRowData:函数（参数）{
params.successCallback（params.data.callRecords）；
},
},
onFirstDataRendered:onFirstDataRendered，
};
函数onFirstDataRendered（参数）{
//为了表示的目的任意扩展一行
setTimeout（函数（）{
params.api.getDisplayedRowatinex（1）.setExpanded（true）；
}, 0);
}
//在页面完成加载后设置网格
document.addEventListener（'DOMContentLoaded'，函数（）{
var gridDiv=document.querySelector（“#myGrid”）；
新的agGrid.Grid（gridDiv，gridOptions）；
怨恨
.simpleHttpRequest({
网址：'https://www.ag-grid.com/example-assets/master-detail-data.json',
})
.then（功能（数据）{
gridOptions.api.setRowData（数据）；
});
});

JavaScript示例
html，正文{
身高：100%；
宽度：100%；
保证金：0；
框大小：边框框；
-webkit溢出滚动：触摸；
}
html{
位置：绝对位置；
排名：0；
左：0；
填充：0；
溢出：自动；
}
身体{
填充：1rem；
溢出：自动；
}
var__basePath='./'；
初始化主网格时，根本不需要拥有所有数据。您可以仅使用主网格所需的数据初始化主网格。
getDetailRowData
仅在行展开时才会被调用，此时您可以进行必要的API调用并更新详细信息网格，如下所示

getDetailRowData: function (params) {
  // This can be API call
  Promise.resolve(data).then((res) => {
    params.successCallback(res);
  })
},


const数据=[
{
“姓名”：“诺拉·托马斯”，
“账户”：177000，
“呼叫”：24，
“分钟”：25.65
},
{
“姓名”：“Mila Smith”，
“账户”：177001，
“呼叫”：24，
“分钟”：26.21666665
}
];
常量callRecords={
"177000": [
{
“姓名”：“苏珊”，
“callId”：555，
“持续时间”：72，
“开关代码”：“SW3”，
“方向”：“输出”，
“编号”：“（00）88542069”
},
{
“姓名”：“苏珊”，
“callId”：556，
“期限”：61，
“开关代码”：“SW3”，
“方向”：“在”，
“编号”：“（01）7432576”
},
],
"177001": [
{
“姓名”：“苏珊”，
“callId”：579，
“期限”：23，
“开关代码”：“SW5”，
“方向”：“输出”，
“编号”：“（02）47485405”
},
{
“姓名”：“苏珊”，
“callId”：580，
“期限”：52，
“开关代码”：“SW3”，
“方向”：“在”，
“编号”：“（02）32367069”
}
]
}
变量gridOptions={
columnDefs：[
//展开/折叠图标所需的组单元渲染器
{字段：'name'，cellRenderer:'agGroupCellRenderer'}，
{字段：'帐户'}，
{字段：'调用'}，
{字段：'minutes'，valueFormatter:'x.toLocaleString（）+'m'}，
],
默认值f：{
弹性：1，
},
细节：没错，
DetailCellRenderParams：{
详细网格选项：{
columnDefs：[
{字段：'callId'}，
{字段：'方向'}，
{字段：'number'，最小宽度：150}，
{字段：'duration'，valueFormatter:'x.toLocaleString（）+'s'}，
{字段：'switchCode'，最小宽度：150}，
],
默认值f：{
弹性：1，
},
},
getDetailRowData:函数（参数）{
Promise.resolve（callRecords[params.data.account]）。然后（（res）=>{
参数successCallback（res）；
})
},
},
onFirstDataRendered:onFirstDataRendered，
};
函数onFirstDataRendered（参数）{
//为了表示的目的任意扩展一行
setTimeout（函数（）{
params.api.getDisplayedRowatinex（1）.setExpanded（true）；
}, 0);
}
//在页面完成加载后设置网格
document.addEventListener（'DOMContentLoaded'，函数（）{
var gridDiv=document.querySelector（“#myGrid”）；
新的agGrid.Grid（gridDiv，gridOptions）；
gridOptions.api.setRowData（数据）；
});

JavaScript示例
html，
身体{
身高：100%；
宽度：100%；
保证金：0；
框大小：边框框；
-webkit溢出滚动：触摸；
}
html{
位置：绝对位置；
排名：0；
左：0；
填充：0；
溢出：自动；