农业网格树数据功能不显示数据
Ag-grid tree data feature is not showing data
我现在正在努力使这项工作两天。我正在尝试使用这篇文章在 ReactJS 的 Ag-grid 中显示树数据:https://www.ag-grid.com/javascript-grid-server-side-model-tree-data/
也许我从他们的文档中遗漏了一些东西。请有人帮忙。
显然他们的 Tree 数据是一项企业功能,我参考了他们的服务器端模型。
预期功能:
树数据特征与来自服务器的数据。
两种模式:一次获取所有数据
或延迟加载批量数据
我的JSON如下:
[{
"employeeId": 101,
"employeeName": "Erica Rogers",
"jobTitle": "CEO",
"employmentType": "Permanent",
"children": [{
"employeeId": 102,
"employeeName": "Malcolm Barrett",
"jobTitle": "Exec. Vice President",
"employmentType": "Permanent",
"children": [
{
"employeeId": 103,
"employeeName": "Leah Flowers",
"jobTitle": "Parts Technician",
"employmentType": "Contract"
},
{
"employeeId": 104,
"employeeName": "Tammy Sutton",
"jobTitle": "Service Technician",
"employmentType": "Contract"
}
]
}]
}]
并且
代码:
import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
import 'ag-grid-enterprise';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{ field: "jobTitle" },
{ field: "employmentType" }
],
matchGridData: [],
autoGroupColumnDef: {
headerName: "Model",
field: "model",
cellRenderer: 'agGroupCellRenderer',
cellRendererParams: {
checkbox: true
}
},
// indicate if row is a group node
isServerSideGroup: function (dataItem) {
return dataItem.group;
},
// specify which group key to use
getServerSideGroupKey: function (dataItem) {
return dataItem.MatchGroup;
}
}
}
render() {
return (
<div
className="ag-theme-balham"
style={{
height: '500px',
width: '600px'
}}
>
<AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.matchGridData} rowSelection="multiple"
onGridReady={params => this.gridApi = params.api} treeData={true} isServerSideGroup={this.state.isServerSideGroup}
getServerSideGroupKey={this.state.getServerSideGroupKey}
rowModelType='serverSide'
>
</AgGridReact>
</div>
);
}
编辑:
我已经在 Github 上准备了一个小型测试存储库,专门用于解决此问题,在此 GridExampleGrouping.js 正在呈现,但未呈现 GridExampleTreeServer.js
: https://github.com/HarvestAdmin/test-grid
getMatchingData = e => {
fetch('/Matching/ResultGrid.aspx/GetMatchingData', {
method: 'POST',
body: JSON.stringify({ userId: this.state.userId, executionId: this.state.matchOrExecutionId, outputType: this.state.outputType, action: this.state.action }),
headers: {
"Content-Type": "application/json; charset=UTF-8",
"Accept": "application/json, text/javascript, */*; q=0.01",
"X-Requested-With": "XMLHttpRequest"
}
})
.then(response => {
return response.json();
}, error => {
return error.json();
})
.then(jsonResponse => {
var result = JSON.parse(jsonResponse.d);
console.log(result);
this.setState({ matchGridData: result.SearchResults.Table });
});
}
}
图1:浏览器输出:
图2:上面输出的控制台:
图 3:即使在应用了 Ag-grid 提供的试用许可证之后:
在就试用许可证联系 Ag-grid 支持团队后,他们建议我应该使用 px 而不是 % 来设置包含 Ag-grid 元素的 DIV 元素的高度和宽度。
出于某种原因,给出谨慎的值而不是百分比是可行的。
我现在正在努力使这项工作两天。我正在尝试使用这篇文章在 ReactJS 的 Ag-grid 中显示树数据:https://www.ag-grid.com/javascript-grid-server-side-model-tree-data/
也许我从他们的文档中遗漏了一些东西。请有人帮忙。
显然他们的 Tree 数据是一项企业功能,我参考了他们的服务器端模型。
预期功能: 树数据特征与来自服务器的数据。 两种模式:一次获取所有数据 或延迟加载批量数据
我的JSON如下:
[{
"employeeId": 101,
"employeeName": "Erica Rogers",
"jobTitle": "CEO",
"employmentType": "Permanent",
"children": [{
"employeeId": 102,
"employeeName": "Malcolm Barrett",
"jobTitle": "Exec. Vice President",
"employmentType": "Permanent",
"children": [
{
"employeeId": 103,
"employeeName": "Leah Flowers",
"jobTitle": "Parts Technician",
"employmentType": "Contract"
},
{
"employeeId": 104,
"employeeName": "Tammy Sutton",
"jobTitle": "Service Technician",
"employmentType": "Contract"
}
]
}]
}]
并且 代码:
import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
import 'ag-grid-enterprise';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{ field: "jobTitle" },
{ field: "employmentType" }
],
matchGridData: [],
autoGroupColumnDef: {
headerName: "Model",
field: "model",
cellRenderer: 'agGroupCellRenderer',
cellRendererParams: {
checkbox: true
}
},
// indicate if row is a group node
isServerSideGroup: function (dataItem) {
return dataItem.group;
},
// specify which group key to use
getServerSideGroupKey: function (dataItem) {
return dataItem.MatchGroup;
}
}
}
render() {
return (
<div
className="ag-theme-balham"
style={{
height: '500px',
width: '600px'
}}
>
<AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.matchGridData} rowSelection="multiple"
onGridReady={params => this.gridApi = params.api} treeData={true} isServerSideGroup={this.state.isServerSideGroup}
getServerSideGroupKey={this.state.getServerSideGroupKey}
rowModelType='serverSide'
>
</AgGridReact>
</div>
);
}
编辑: 我已经在 Github 上准备了一个小型测试存储库,专门用于解决此问题,在此 GridExampleGrouping.js 正在呈现,但未呈现 GridExampleTreeServer.js : https://github.com/HarvestAdmin/test-grid
getMatchingData = e => {
fetch('/Matching/ResultGrid.aspx/GetMatchingData', {
method: 'POST',
body: JSON.stringify({ userId: this.state.userId, executionId: this.state.matchOrExecutionId, outputType: this.state.outputType, action: this.state.action }),
headers: {
"Content-Type": "application/json; charset=UTF-8",
"Accept": "application/json, text/javascript, */*; q=0.01",
"X-Requested-With": "XMLHttpRequest"
}
})
.then(response => {
return response.json();
}, error => {
return error.json();
})
.then(jsonResponse => {
var result = JSON.parse(jsonResponse.d);
console.log(result);
this.setState({ matchGridData: result.SearchResults.Table });
});
}
}
图1:浏览器输出:
图2:上面输出的控制台:
在就试用许可证联系 Ag-grid 支持团队后,他们建议我应该使用 px 而不是 % 来设置包含 Ag-grid 元素的 DIV 元素的高度和宽度。
出于某种原因,给出谨慎的值而不是百分比是可行的。