Ag-grid 树数据功能未显示数据答案

【问题标题】：Ag-grid tree data feature is not showing dataAg-grid 树数据功能未显示数据
【发布时间】：2019-10-22 19:57:27
【问题描述】：

我现在正在尝试使这项工作两天。我正在尝试使用这篇文章在 ReactJS 中的 Ag-grid 中显示 Tree 数据：https://www.ag-grid.com/javascript-grid-server-side-model-tree-data/

也许我从他们的文档中遗漏了一些东西。请有人帮忙。

显然他们的树数据是一个企业特性，我参考了他们的服务器端模型。

预期功能：带有来自服务器的数据的树数据功能。两种模式：一次获取所有数据或延迟加载批量数据

我的 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 提供的试用许可证 :

【问题讨论】：

企业功能有企业支持，所以您的问题可能会在他们的网站上得到适当的回应
@Rikin 嗨。我的公司只有在客户批准后才会购买许可证，为此我正在开发 POC。我会尝试联系 Ag-grid 团队，看看他们是否可以在试用版中提供帮助。我仍然希望可能使用过树数据功能的人可以在这里帮助我。
你能用你的例子创建 plunker 链接吗？
@Rikin 抱歉回复晚了。我专门为这个测试准备了一个 git repo。 github.com/HarvestAdmin/test-grid 在这个 GridExampleGrouping.js 中正在呈现 GridExampleTreeServer.js 没有被呈现。
@Rikin 我已经在 ag-grid 支持团队的帮助下添加了我的答案，以防您等待它。

标签： javascript reactjs ag-grid ag-grid-react

【解决方案1】：

就试用许可证联系 Ag-grid 支持团队后，他们建议我应该使用 px 而不是 % 来设置包含 Ag-grid 元素的 DIV 元素的高度和宽度。

出于某种原因，给出谨慎的值而不是百分比有效。

【讨论】：