如何用tree grid的树形结构动态生成数据

Question

import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, ViewChild, AfterViewInit, ViewEncapsulation, TemplateRef, ElementRef } from '@angular/core';
import { NbWindowService, NbWindowRef, NbThemeService } from '@nebular/theme';
import { NbWindowControlButtonsConfig, NbSortDirection, NbSortRequest, NbGetters, NbTreeGridDataSource, NbTreeGridDataSourceBuilder } from '@nebular/theme';
import { TreeModel } from "../../../../@core/interfaces/common/dataModels"
interface TreeNode<T> {
  data: T;
  children?: TreeNode<T>[];
  expanded?: boolean;
}
interface FSEntry {
  name: string;
  size: string;
  kind: string;
  items?: number;
}
interface TreeModel {
  ProjectA: string;
  ProjectB: string;
  ProjectC: string;
  ProjectD: string;
  childEntries?: TreeModel[];
}
@Component({
  selector: 'app-app_component',
  templateUrl: './app_component.component.html',
  styleUrls: ['./app_component.component.scss'],
  providers: [DatePipe]
})
export class app_component implements OnInit {
  @ViewChild('disabledEsc', { read: TemplateRef, static: true }) disabledEscTemplate: TemplateRef<HTMLElement>;
  @ViewChild('gantt_here', { static: true }) ganttContainer!: ElementRef;
  customColumn = 'ProjectA';
  defaultColumns = ['ProjectB', 'ProjectC', 'ProjectD'];
  allColumns = [this.customColumn, ...this.defaultColumns];
  source: NbTreeGridDataSource<TreeModel>;
  sortColumn: string;
  sortDirection: NbSortDirection = NbSortDirection.NONE;
  isValid: Boolean = true; windowRef: NbWindowRef;
  constructor(
    dataSourceBuilder: NbTreeGridDataSourceBuilder<TreeModel>) 
    {
     const getters: NbGetters<TreeModel, TreeModel> = {
       dataGetter: (node: TreeModel) => node,
       childrenGetter: (node: TreeModel) => node.childEntries || undefined,
       expandedGetter: (node: TreeModel) => !!node.expanded,
     };
     this.source = dataSourceBuilder.create(this.data, getters);
  }
   private data: TreeModel[] = [
     {
       ProjectA: 'Project',
       ProjectB: 'Project',
       ProjectC: '',
       ProjectD: '',
       expanded: false,
       childEntries: [
         {
           ProjectA: 'Project',
           ProjectB: 'project-1.doc',
           ProjectC: '',
           ProjectD: '50',
         },
         // ... other child entries
       ],
     },
     // ... other root entries
   ];
  ngOnInit(){
    this.Query();
  }
  async Query() {
  var connection = await getConnection();
  var query = `SELECT ${allColumns.join(', ')} FROM table_a`; // 查询所有列
  var dataFromDB = await connection.query(query);
      this.RetueDatas = this.result.Data;
      this.queryCnt = this.RetueDatas.length;
      this.data = this.RetueDatas.map(row => {
        const treeNode: TreeModel = {
          ProjectA: row[this.customColumn],
          ProjectB: row.ProjectB,
          ProjectC: row.ProjectC,
          ProjectD: row.ProjectD,
          childEntries: row.items ? row.items.map((item, index) => ({
            ProjectType: row[this.customColumn],
            ProjectName: `${row.ProjectB}-${index + 1}`,
            Function: '', // 或者从数据库获取其他值
            ProgressBar: item.size.toString(), // 假设size是数值，需要转换为字符串
          })) : []
        };
        return { data: treeNode, children: treeNode.childEntries ? treeNode.childEntries.map(child => ({ data: child })) : undefined, expanded: false };
      });
      // 构建NbTreeGridDataSource
      const getters: NbGetters<TreeModel, TreeModel> = {
        dataGetter: (node: TreeNode<TreeModel>) => node.data,
        childrenGetter: (node: TreeNode<TreeModel>) => node.children || undefined,
        expandedGetter: (node: TreeNode<TreeModel>) => !!node.expanded,
      };
      return of(this.dataSourceBuilder.create(this.data, getters));
  }
}

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

您的代码大致上是正确的，但需要做一些调整以动态生成数据并将其应用到树形结构中。在您提供的代码中，似乎试图将查询结果映射到树形结构，但存在一些问题和可能的改进点。我会逐步解释如何改进这个过程。

首先，确保您已经成功获取数据库连接并可以执行查询。这是关键的第一步，因为只有获取到数据之后才能进行后续处理。接下来，根据您提供的代码，我列出几个关键步骤和可能的问题点：

1. 数据源初始化: 在构造函数中初始化数据源时，您应该确保数据源是基于查询结果动态生成的。这意味着在ngOnInit生命周期钩子中，您需要根据查询结果重新构建数据源。
2. 映射查询结果到树形结构: 在Query方法中，您正在尝试将数据库查询结果映射到树形结构。在此过程中，确保正确处理数据，尤其是当数据涉及到子项时（即具有子条目的项目）。您需要使用递归的方式来构建这些子项。
3. 更新数据源: 在得到新的查询数据后，需要重新创建数据源以更新树形结构。由于NbTreeGridDataSource是基于数据数组和getter函数创建的，因此每次数据更新时都需要重新创建它。

下面是一些改进的代码片段，这些片段假设您已经成功地获取了数据库连接并查询了数据：

ngOnInit() {
  this.Query(); // 初始化查询方法
}

async Query() {
  // ... 查询数据库的代码 ...
  const resultData = await connection.query(query); // 获取查询结果数据
  this.data = this.mapDataToTreeGridFormat(resultData); // 将数据映射为树形结构格式
  this.updateTreeGridSource(); // 更新树形网格数据源以反映新的数据
}

// 数据映射函数（递归方式处理子条目）
mapDataToTreeGridFormat(data: any[]): TreeModel[] {
  return data.reduce((acc, item) => {
    const treeNode: TreeModel = { /* 设置节点的基本属性 */ }; // 基于查询结果构建节点对象
    // 构建子节点（如果有的话）并递归处理它们
    const children = item.items ? this.mapDataToTreeGridFormat(item.items) : [];
    return [...acc, { data: treeNode, children }, ...children]; // 返回包含子节点的节点对象数组
  }, []); // 从空数组开始累加构建的节点对象数组
}

updateTreeGridSource() {
  const getters: NbGetters<TreeModel, TreeModel> = { /* 定义getter函数 */ }; // 如之前定义的一样
  this.source = this.dataSourceBuilder.create(this.data, getters); // 重新创建数据源以更新树形结构
}

请注意，上述代码是一个简化的示例，旨在指导您如何根据数据库查询结果动态更新树形结构的数据源。在实际应用中，您可能需要根据您的数据结构进行更多定制和调整。此外，确保您的数据库连接和查询逻辑是可靠的，并且能够返回正确的数据格式。