在具有异步数据加载的角度网格(ag网格)中创建树
我正在尝试使用angular-grid (ag-grid)来显示一个树，如文档中提供的示例所示：
http://www.angulargrid.com/example-file-browser/index.php
在给定的示例中，已经提供了所有数据。如何在展开行组时使用异步数据加载？我的猜测是我需要编写自己的组行渲染器。
回答 3
Stack Overflow用户
发布于 2017-02-16 20:02:05
我最近在我的React.js应用程序中遇到了同样的问题，并找到了解决方案。这与@leden发布的内容类似，但我找到了如何在表行更新之间维护当前行扩展的解决方案。
解决方案如下：
- 为每个顶级行添加虚拟子行。可以是空的，也可以是加载的...例如，第一列中的字符串。每次更新表rowData时都会调用的
- On event getNodeChildDetails，您可以指定是否应展开行。所以我们的想法是跟踪哪些是扩展的，哪些是未扩展的。
getNodeChildDetails = (rowItem) => { if (rowItem.children) { return { group: true，expanded : rowItem.id in this.expandedRows，this.expandedRows: rowItem.children，}；} else { return null；} };
- On event rowGroupOpened我们跟踪哪些行被展开。
rowGroupOpened =(参数) => { const id= param.node.data.id；if(!param.node.expanded) { delete this.expandedRowsid；return；} this.expandedRowsid = true；if (param.node.data.children.length !== 1) { //这里我们需要检查是否只有虚行存在return；} this.api.showLoadingOverlay()；//在这里我模拟从服务端setTimeout(() => { this.rowData.forEach((e) => { if (e.id == id) { e.children = //添加获取行} })；this.api.setRowData(this.rowData)；//设置数据，将触发每一行的getNodeChildDetails调用this.api.hideOverlay()；}，1000)；};
Stack Overflow用户
发布于 2015-09-03 04:35:32
网格不支持树数据的开箱即用延迟加载。因此，是的，您必须编写自己的cellRenderer来实现这一点。
另外，我是ag-Grid的作者，所以你可以把这个答案当作福音！
Stack Overflow用户
发布于 2016-05-30 03:35:02
这只是一个想法，但我认为您可以将单个占位符子行添加到组中，并使用“正在加载...”在第一个单元格中，将组的onRowGroupOpened事件设置为进行ajax调用以从服务器获取数据，然后使用onreadystatechange添加新行并替换占位符。初始占位符行可以包含服务器计算的合计值，以驱动组行的单元格中的聚合(合计)值，当实际数据替换占位符时，合计值将保持不变。
我已经提出了该方法的基本测试。这并不完美，因为网格在每次扩展后都会重新构建(我找不到一种优雅的方法来只追加新行)，但它确实可以工作。
脚本的最顶端是AJAX调用以获取详细信息。虽然这在流程的后面发生，但我将它放在顶部，这样如果服务器接收到这个请求，它就会提供数据并退出，而不会再次加载页面。或者，您也可以将其放入另一个文件中。
<?php
if (isset($_REQUEST['g'])) { // this is the AJAX request for child data (called later, but needed at the start of the script)
// get connection to database
require_once 'db_connection.php'; $dbh=getConnection();
// query data to array
$sql="SELECT accounts.description AS account, '' AS info,
tx.amnt AS amount, 1 AS transactions
FROM tx
INNER JOIN accounts ON tx.account=accounts.account_id
WHERE accounts.description='".$_REQUEST['g']."'";
$data=array();
$result = $dbh->query($sql);
while ($row = $result->fetch_assoc()) {
$data[]=$row;
}
$result->free();
// return data as JSON
print json_encode($data, JSON_NUMERIC_CHECK);
exit;
}
?>然后紧接着是一个普通的HTML页面，在头部的javascript中有更多的php：
<!DOCTYPE html>
<html>
<head>
<script src="lib/ag-grid-enterprise-master/dist/ag-grid-enterprise.js"></script>
<script>
// get JSON for initial group-level data from server with a little snippet of php which is called when the page is first loaded
var rowData =
<?php
// get connection to the database
require_once 'db_connection.php'; $dbh=getConnection();
// query data to array
$sql = "SELECT description AS account, 'loading...' AS info,
SUM(tx.amnt) AS amount, COUNT(tx.tx_id) AS transactions
FROM accounts
INNER JOIN tx ON accounts.account_id=tx.account
GROUP BY accounts.account_id";
$data=array();
$result = $dbh->query($sql);
while ($row = $result->fetch_assoc()) {
$data[]=$row;
}
$result->free();
// inject the JSON into the javascript assignment to rowData
print json_encode($data, JSON_NUMERIC_CHECK);
?>;
// (back in javascript again)
// event function for when a group is expanded
function getChildRows(data) {
if (data.node.allLeafChildren) {
if (data.node.allLeafChildren.length > 0) {
if (data.node.allLeafChildren[0].data.info==="loading...") {
// data for this group has not yet been loaded, so make AJAX request for it
var xmlHttp=new XMLHttpRequest();
xmlHttp.onreadystatechange=function() {
if ((xmlHttp.readyState===4) && (xmlHttp.status === 200)) {
// call function to add the new rows to the grid
addRecords(JSON.parse(xmlHttp.responseText));
}
};
var requestParameters="g="+encodeURIComponent(data.node.key);
xmlHttp.open("POST", "index.php", true); // call to this same script
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send(requestParameters);
}
}
}
}
function addRecords(data) {
var x; var d=new Array();
var acc=data[0].account;
for(x in gridOptions.api.inMemoryRowModel.rootNode.allLeafChildren) {
if (gridOptions.api.inMemoryRowModel.rootNode.allLeafChildren[x].data.account===acc) {
// this is group we are replacing with new data
for (x in data) {
d.push(data[x]);
}
} else {
// this node is just the data as currently loaded to the grid (no change)
d.push(gridOptions.api.inMemoryRowModel.rootNode.allLeafChildren[x].data);
}
}
gridOptions.api.setRowData(d);
}
// set up the grid (standard stuff)
var columnDefs = [
{headerName: "Account", field: "account", rowGroupIndex: 0, cellRenderer: "group", cellRendererParams : {suppressCount: true} },
{headerName: "Info", field: "info"},
{headerName: "Amount", field: "amount", aggFunc:"sum"},
{headerName: "Transactions", field: "transactions", aggFunc:"sum"}
];
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
groupSuppressAutoColumn: true,
onRowGroupOpened: getChildRows /* event created above */
}
document.addEventListener("DOMContentLoaded", function() {
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
});
</script>
</head>
<body>
<div id="myGrid" style="height: 100%;" class="ag-fresh"></div>
</body>
</html>@Niall -关于如何更优雅地添加新行并保持组扩展状态有什么想法吗？
https://stackoverflow.com/questions/32242276
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号