使用水平线和垂直线创建树视图，以显示使用CSS的连通性 [英] Create tree view with horizontal and vertical lines showing the connectivity using css

问题描述

我有一个要求，我们需要显示嵌套元素在文件夹和子文件夹中具有水平和垂直线.我搜索了但找不到任何相关的信息. 请参见下图以供参考.

I'm having the requirement where we need to show the nested elements to have horizontal and vertical line for folders and subfolder. i searched but unable to find anything relevant. See below picture for reference.

示例图像

有人可以帮我解决这个问题.

Can someone help me in this issue.

推荐答案

首先要知道如何使用.css进行制作.我发现纯CSS中的极简树视图

The first it's know how make it using .css. I find this beauty Minimalist Tree View In Pure CSS

好吧，有了这个想法，我们可以使用Angular生成一个递归组件".但首先必须考虑到我们需要使用属性选择器"来不生成组件的标签.不用担心，它仅用作选择器，例如

Well, with this idea we can use Angular to generate a "recursive component". but first we must take account that we need use "attribute selector" to not generate the tag of the component. Don't worry, it's only use as selector some like

selector: '[recursive]'

所以，不要写类似的东西

So, instead of write some like

<recursive></recursive>

我们可以使用类似

<ul recursive></ul>

好吧，组件就像

<li *ngFor="let item of children">
    {{item.label}}
    <ul recursive *ngIf="item.children" 
        [children]="item.children" 
        [parent]="self" 
        [level]="level!=undefined?level+1:0">
    </ul>
</li>

@Component({
  selector: '[recursive]', //<--the the "selector"
  templateUrl:'./hello.component.html'
})    
export class HelloComponent  {
  @Input() level: number;
  @Input() label: string;
  @Input() children: any;
  @Input() parent: any;

  self=this;

}

好吧，我添加了代码中未使用的属性"level"和"parent"，但是如果我们的组件使更多"显示树的话，可能会很有趣.

Well, I add the properties "level" and "parent" that I don't use in the code but can be interesting if our component make "some-more" that show the tree.

我们的app.component.html就像

And our app.component.html is some like

<ul class="tree" recursive [children]="data"></ul>

要小心.我需要在app.component中使用ViewEncapsulation.None来传输.css

Be carefull. I need use ViewEncapsulation.None in the app.component to transport the .css

看到我们给[孩子]自己的数据

See that we give [children] the own data

例如，

data = [{label: "Parent1", children: [
      { label: "Parent 1's only child"  }
  ]},
    {label:"Parent2"},
    {label:"Parent3", children: [
      { label: "1st Child of 3" ,children:[
         {label:"1st grandchild"},
         {label:"2nd grandchild"}
      ]},
      { label: "2nd Child of 3" },
      { label: "3rd Child of 3" }
      ]
   },
   {
    label: "Parent 4", children: [
      { label: "Parent 4's only child"  }
  ]}]

您可以在此stackblitz

已更新 如果要添加打开/关闭容量，可以很容易地添加跨度并在以下三种情况下使用[ngClass]:doc，打开和关闭，因此我们recursive.html变成

Updated If we want add open/close capacity, it's easy adding a span and using [ngClass] for the three cases: doc, open and close, so our recursive.html becomes

<li *ngFor="let item of children">
    <span [ngClass]="!item.children?
         'doc':item.isOpen?'open':'close'" 
         (click)="item.isOpen=!item.isOpen"></span>
    {{item.label}}
    <ul recursive *ngIf="item.children && item.isOpen" 
        [children]="item.children" 
        [parent]="self" 
        [level]="level!=undefined?level+1:0">
    </ul>
</li>

我使用了.css之类的

I used a .css like

.doc,.open,.close
{
  display:inline-block;
  width:1rem;
  height:1rem;
  background-size: 1rem 1rem;
}
.doc
{
  background-image:url('...');
}
.open
{
  background-image:url('...');
}
.close
{
  background-image:url('...');
}

更新后的stackblitz

已更新2 ，我不太喜欢使用ViewEncapsulation.无，因此我们可以进行变通，然后递归组件变为

Updated 2 I don't like so much use ViewEncapsulation.None, so we can make a work-around and our recursive component becomes like

<ul class="tree" *ngIf="level==undefined">
  <ng-container *ngTemplateOutlet="tree;context:{children:children}">
  </ng-container>
</ul>
<ng-container *ngIf="level!=undefined">
  <ng-container *ngTemplateOutlet="tree;context:{children:children}">
  </ng-container>
</ng-container>

<ng-template #tree let-children="children">
<li *ngFor="let item of children">
    <span [ngClass]="!item.children?'doc':item.isOpen?'open':'close'" (click)="item.isOpen=!item.isOpen"></span>{{item.label}}
    <ul recursive *ngIf="item.children && item.isOpen" 
        [children]="item.children" 
        [parent]="self" 
        [level]="level!=undefined?level+1:0">
            </ul>
</li>
</ng-template>

就是这样.第一个使用<ul class="tree">...</ul>，其他不添加<ul>

That's. The first use a <ul class="tree">...</ul>, the others not add the <ul>

同样，最终stackblitz

这篇关于使用水平线和垂直线创建树视图，以显示使用CSS的连通性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！