如何在材质树大子级别上实现虚拟滚动 [英] 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屋！