使用异步数据加载在angular-grid(ag-grid)中创建树 [英] Create tree in angular-grid (ag-grid) with async data loading

问题描述

我正在尝试使用angular-grid(ag-grid)来显示树，就像文档中提供的示例一样:

http://www.angulargrid.com/example-file-browser/index.php

在给定的示例中，所有数据都已提供.扩展行组时如何使用异步数据加载?我的猜测是我需要编写自己的组行渲染器.

解决方案

我最近在我的React.js应用程序中遇到了同样的问题，并找到了解决方案.它类似于@leden发布的内容，但是我找到了解决方案，该方法如何保持表行更新之间的当前行扩展.

解决方法如下:

1. 为每个顶级行添加虚拟子行.可以为空，也可以具有loading ...字符串，例如在第一列中.

2. 在事件getNodeChildDetails上，每次更新表rowData时都会调用它，您可以指定是否应扩展行.因此，我们的想法是，我们要跟踪什么是扩展的，什么不是扩展的.

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

3. 在事件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);
     };
   

I am trying to use angular-grid (ag-grid) to display a tree like in the example provided in the documentation:

http://www.angulargrid.com/example-file-browser/index.php

In the given example, all the data is already provided. How do I use async data loading when a row group is expanded? My guess is that i need to write my own group row renderer.

解决方案

I came recently to the same problem in my React.js app and found solution. It's similar to what @leden posted but I found solution how to maintain current row expansions between table rows update.

The solution is as follow:

1. Add dummy child row for each top-level row. Can be empty or can have loading... string for example in first column.

2. On event getNodeChildDetails, which is called each time you update your table rowData, you can specify if a row should be expanded or not. So the idea is that we keep track of what is expanded and what is not.

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

3. On event rowGroupOpened we keep track which rows are expanded.

   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);
     };
   

这篇关于使用异步数据加载在angular-grid(ag-grid)中创建树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！