如何在素材树的子级上实现虚拟滚动 [英] How to implement Virtual scroll on material tree grand child level

问题描述

我有一个带有父级，子级和孙级的角形垫树.在点击孩子时，我在其中添加了孙子.但是孙子拥有高达4k记录的巨大数据.这使树非常慢.我的代码如下

I have an angular mat-tree with parent, child and grand child level. On clicking of child I am adding grandchild in it. But grandchild having huge data upto 4k records. Which is making tree extremely slow. My code as below

<div *ngIf="isGrandChildLoaded"><mat-spinner></mat-spinner></div>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    {{node.name}}
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.name">
      <mat-icon class="mat-icon-rtl-mirror" (click)="clickTreeNode(node)">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
  </mat-tree-node>
</mat-tree>

请注意我在stackblitz中所做的尝试:

Please note what I have tried in stackblitz: My code

我注意到在这种情况下，虚拟滚动将是最佳解决方案.我看到了一个示例:参考

I have noted virtual scroll will be the best solution in this case. And I have saw an example: Refernce

但是在示例中，它在整个树级别具有完整数据源的virtual-scroll.

But in example it is having virtual-scroll in whole tree level with full dataSource.

如何在孙级中一次添加具有10个元素的虚拟滚动.因此，它不会冻结DOM和Tree.请指导我...

How Can add Virtual scroll in grandchild level with 10 elements at a time. So it wont freeze DOM and Tree. Please guide me...

推荐答案

要虚拟化树，请将层次结构数据映射到平面列表，以便每个项目都包括原始数据和层次结构信息.

To virtualize a tree, map the hierarchical data to a flat list such that each item includes original data plus hierarchy info.

例如，此数据

    [{ 
        name: 'item 1', 
        children: [{ 
            name: 'sub item 1', 
            children: [{ 
                name: 'grandchild 1', 
                children: [] 
            }]
        }]
    }]

将成为

    [
        { name: 'item 1', depth: 0, parent: null },
        { name: 'sub item 1', depth: 1, parent: /*ref to 'item 1'*/ },
        { name: 'grandchild 1', depth: 2, parent: /*ref to 'sub item 1'*/ }
    ]

将数据展平后，可以将其虚拟化为与任何展平列表相同.使用深度来缩进元素，并使用parent根据父级展开状态在列表中切换子项包含.

With the data flattened, it is can be virtualized the same as any flat list. Use the depth to indent elements, and use the parent to toggle child item inclusion in the list based on parent expand state.

此外，这是我刚刚发布的基于角度的实现. https://github.com/gjcampbell/ooffice/tree/master/项目/树状图

Also, here's an angular based implementation that I just published. https://github.com/gjcampbell/ooffice/tree/master/projects/of-tree

这篇关于如何在素材树的子级上实现虚拟滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！