【发布时间】:2017-03-25 02:28:25
【问题描述】:
ag-Grid,遵循 javascript 的 official demo,但使用类似于现实世界的 API 而非硬编码数据。注意:没有 jQuery,只需将原始的普通 XMLHttpRequest() 用于 ajax。
- F12 验证API 返回数据与demo 结构相同,内部有children 节点,并为gripOptions.rowData 分配返回数据。
- 尝试在
gripOptions内部将rowData实例化为rowData: [],得到同样的错误 或者rowData: {},得到 ReferenceError: rowData 未定义。
HTML:
<script src="/scripts/agGrid/ag-grid.js"></script>
<script src="/scripts/agGrid/myAG.js"></script>
<br />JavaScript ag-Grid
<div id="myGrid" style="height: 200px;" class="ag-fresh"></div>
myAG.js:
var httpApi = new XMLHttpRequest();
var columnDefs = [
{ headerName: "Client Name", field: "ClientName", unSortIcon: true, cellRenderer: "group" },
{ headerName: "Division", field: "Division" },
{ headerName: "Others", field: "Others" }
];
var gridOptions = {
columnDefs: columnDefs,
getNodeChildDetails: getNodeChildDetails
};
function getNodeChildDetails(rowItem) {
if (rowItem.ClientName) {
return {
group: true,
// provide ag-Grid with the children of this group
children: rowItem.children,
// the key is used by the default group cellRenderer
key: rowItem.ClientName
};
} else {
return null;
}
}
// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function () {
$.ajax({
type: "GET",
url: "/api/myAG/Tree",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
gridOptions.rowData = data;
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
})
});
版本: ag-grid = v8.1.0 火狐 = 50.1.0
F12 确认数据存在并分配:
【问题讨论】:
-
如果我取出树数据分组的东西,它会在网格中显示父级数据。
-
是不是有些孩子里面没有内容?
标签: ag-grid