如何在行单击时用数据填充指定的详细信息网格
Posted
技术标签:
【中文标题】如何在行单击时用数据填充指定的详细信息网格【英文标题】：How to fill specified detail grid with data on row click 【发布时间】：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 来获取详细的网格数据
【参考方案1】：
在初始化主网格时完全不需要所有数据。您可以仅使用主网格所需的数据初始化主网格。
getDetailRowData 只会在行展开时调用，此时您可以进行必要的 API 调用并更新详细信息网格，如下所示。
getDetailRowData: function (params)
// This can be API call
Promise.resolve(data).then((res) =>
params.successCallback(res);
)
,
const data = [
"name": "Nora Thomas",
"account": 177000,
"calls": 24,
"minutes": 25.65
,
"name": "Mila Smith",
"account": 177001,
"calls": 24,
"minutes": 26.216666666666665
];
const callRecords =
"177000": [
"name": "susan",
"callId": 555,
"duration": 72,
"switchCode": "SW3",
"direction": "Out",
"number": "(00) 88542069"
,
"name": "susan",
"callId": 556,
"duration": 61,
"switchCode": "SW3",
"direction": "In",
"number": "(01) 7432576"
,
],
"177001": [
"name": "susan",
"callId": 579,
"duration": 23,
"switchCode": "SW5",
"direction": "Out",
"number": "(02) 47485405"
,
"name": "susan",
"callId": 580,
"duration": 52,
"switchCode": "SW3",
"direction": "In",
"number": "(02) 32367069"
]
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)
Promise.resolve(callRecords[params.data.account]).then((res) =>
params.successCallback(res);
)
,
,
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);
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>【讨论】：
以上是关于如何在行单击时用数据填充指定的详细信息网格的主要内容，如果未能解决你的问题，请参考以下文章