Question

我正在尝试使用ag-grid实现具有树数据的网格。我正在使用企业行模型。问题是，当硬编码数据并通过setRowData设置它时，网格显示完美。但是，通过企业行模型加载数据时，网格不会呈现为树。实际上，甚至都没有调用getDataPath回调。

是否有人设法将树数据功能与企业数据源一起使用，因为这似乎没有记录？

由于

Answer 1

确保您使用的是SIGSEGV An example is here.
实施'\0'
确保您已实施gridOptions.treeData = true Read more

如果上述内容无效，请在此处分享您的代码，以便更好地了解整体情况。

Answer 2

无限滚动或企业/服务器端数据源与树数据不兼容 https://www.ag-grid.com/javascript-grid-row-models/

因此，您必须更改代码以使用客户端行模型或使用行分组（仅在企业中可用）

Answer 3

我假设按企业行模型，您的意思是服务器端行模型，因此您希望服务器提供树状结构的数据。在那种情况下，我已经能够在Ag-grid中结合以下功能：无限滚动+树数据+服务器端行模型。我什至实现了自定义过滤，并且可以按预期运行。

要使用服务器端行模型，您需要在JavaScript中的ServerSideDataSource实例中提供数据。 ServerSideDataSource的实例必须具有一个名为getRows（）的方法，每次用户向下滚动或展开一行以检索其子记录时，ag-grid就会调用该方法。

ServerSideDataSource的构造函数接受代理数据容器，在ag-grid示例中使用typcailly：fakeServer实例。 fakeServer的一个单例实例保存从真实服务器接收的数据，并将其保留以备后用：

当ag-grid要显示子记录时，它将调用getRows。因为我们提供了此ServerSideDataSource的自定义实现，所以我们可以在getRows内编写逻辑以从此fakeServer实例提取数据。
当ag-grid尝试检查最后一次检索多少数据以在无限滚动（startRow和endRow）中请求下一个块时。

此“ getRows”是用于所有ag-grid服务器端操作的统一方法：排序，子行扩展，在无限滚动中获取下一个块，过滤，startRow和endRow（用于无限滚动）。

此数据源准备就绪后，您必须通过调用它的api params.api.setServerSideDataSource方法将其提供给ag-grid：此API在onGridReady（）方法中可用，该方法也必须传递给Ag-grid。

  var fakeServer = createFakeServer(jsonDataFromServer);
  var dataSource = createServerSideDatasource(fakeServer);
  params.api.setServerSideDatasource(dataSource);

定义假服务器和服务器端数据源：

function createFakeServer(fakeServerData) {
  function FakeServer(allData) {
    this.data = allData;
  }

  FakeServer.prototype.getData = function(request) {
    function extractRowsFromData(groupKeys, data) {
      if (groupKeys.length === 0) {
        return data; //child records are returned from here.
      }
      var key = groupKeys[0];
      for (var i = 0; i < data.length; i++) {
        if (data[i].employeeId === key) {
          return extractRowsFromData(groupKeys.slice(1), data[i].children.slice());
        }
      }
    }
    return extractRowsFromData(request.groupKeys, this.data);
  };
  return new FakeServer(fakeServerData);
}

function createServerSideDatasource(fakeServer) {
  function ServerSideDatasource(fakeServer) {
    this.fakeServer = fakeServer;
  }

  ServerSideDatasource.prototype.getRows = function(params) {
    console.log("ServerSideDatasource.getRows: params = ", params);
    var rows = this.fakeServer.getData(params.request);
    setTimeout(function() {
      params.successCallback(rows, rows.length);
    }, 200);
  };

  return new ServerSideDatasource(fakeServer);
}

我将要求您分别浏览每个功能的服务器端行模型的文档，这意味着Tree数据（客户端模式）和Tree数据（服务器端模式）有两种不同的方法。我们无法设置一个模型并期望它可以与其他模型的数据一起使用。

最后，您必须将这些参数提供给grid：

  var rowModelType = "serverSide";

  var isServerSideGroup = function (dataItem) {
    return !!dataItem.children;
  };

  var getServerSideGroupKey = function (dataItem) {
    return dataItem.employeeId;
  };

请注意，在getServerSideGroup（）中，我们返回的是一个布尔值，该值检查当前行（即dataItem）的children属性是否具有任何children。

服务器端行模型的文档：https://www.ag-grid.com/javascript-grid-server-side-model/

请尝试这个，让我知道。

由于一个月前我有这些要求，因此我与他们联系以寻求试用支持，他们为此准备了一个插件：使用服务器端无限滚动的Tree数据的工作示例。 https://next.plnkr.co/edit/XON5qvh93CpURbOJ?preview

注意：

由于正在从服务器检索树数据，因此不能使用getDataPath。
与客户端树模型不同，树数据将按行嵌套在层次结构中。因此，唯一的列名不会封装在数组中。

错误：

var rowData = [
    {orgHierarchy: ['Erica'], jobTitle: "CEO", employmentType: "Permanent"},
    {orgHierarchy: ['Erica', 'Malcolm'], jobTitle: "VP", employmentType: "Permanent"}
    ...
]

右：

[{
    "employeeId": 101,
    ...
    "children": [
        {
        "employeeId": 102,
        ...
        "children": [
            {
            "employeeId": 103,
            ...
            },
            {
            "employeeId": 104,
            ...
            }
         ]},
    ]}
}]

有一点是，当我刚设置具有企业功能的网格时，在初始阶段根本不渲染网格，因此，他们建议使用px而不是％来包装DIV元素的高度和宽度包含您的Ag-grid元素。

Answer 4

添加import 'ag-grid-enterprise'后再初始化企业密钥解决了getDataPath无法正常工作的问题。

使用企业行模型的TreeData的AG-Grid

4 个答案:

定义假服务器和服务器端数据源：