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

时间:2018-04-17 20:21:44

标签: ag-grid

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

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

由于

4 个答案:

答案 0 :(得分:0)

  • 确保您使用的是SIGSEGV An example is here.
  • 实施'\0'
  • 时,应正确设置数据层次结构
  • 确保您已实施gridOptions.treeData = true Read more

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

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

  1. 当ag-grid要显示子记录时,它将调用getRows。因为我们提供了此ServerSideDataSource的自定义实现,所以我们可以在getRows内编写逻辑以从此fakeServer实例提取数据。
  2. 当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

注意:

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

错误:

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,
            ...
            }
         ]},
    ]}
}]
  1. 有一点是,当我刚设置具有企业功能的网格时,在初始阶段根本不渲染网格,因此,他们建议使用px而不是%来包装DIV元素的高度和宽度包含您的Ag-grid元素。

答案 3 :(得分:0)

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