angularjs – 使用异步数据加载在角网格(ag-grid)中创建树

解决方案如下：

>为每个顶级行添加虚拟子行.可以为空或者可以在第一列中加载…字符串.
>在事件getNodeChildDetails(每次更新表rowData时调用)时,您可以指定是否应该扩展行.因此,我们的想法是跟踪扩展的内容和不扩展的内容.

getNodeChildDetails = (rowItem) => {
  if (rowItem.children) {
    return {
      group: true,expanded: rowItem.id in this.expandedRows,children: rowItem.children,};
  }
  else {
    return null;
  }
};

>在事件rowGroupOpened上,我们会跟踪哪些行被展开.

rowGroupOpened = (param) => {
  const id= param.node.data.id;

  if(!param.node.expanded) {
    delete this.expandedRows[id];
    return;
  }

  this.expandedRows[id] = true;

  if (param.node.data.children.length !== 1) { // Here we need to check if only dummy row is present
      return;
    }

    this.api.showLoadingOverlay();

    // Here I simulate fetching data from server
    setTimeout(() => {
      this.rowData.forEach((e) => {
        if (e.id == id) {
          e.children = [
            // Add  fetch rows
          ]
        }
      });

      this.api.setRowData(this.rowData); // Setting data,will trigger getNodeChildDetails call on each row
      this.api.hideOverlay();
    },1000);
  };