时间戳

首页 > 解决方案 > 分层缩进

javascript - 分层缩进

问题描述

不确定描述它的最佳方式，但图片应该可以。我有一个结构为树的数据，我想用不同级别的缩进显示它。

[1                        ]
    [1a                   ]
        [1ai              ]
    [1b                   ]
[2                        ]
[3                        ]
    [3a                   ]

ETC

关键是向左缩进并在右侧对齐。

以编程方式增加每个元素的 padding-left 适用于前半部分，但可能不是正确的方法。

我正在使用递归角度组件，尽管我最初没有提到角度 b/ci 并不认为它与解决方案必然相关。

ts

export class HierarchicalJobNodeComponent{

  @Input() job: JobHierarchical;

  @Input() depth: number;


  pxDepth(): string {
    return this.depth + "px";
  }

  style(): Object {
    return  { 'margin-left': this.depth + "px", 'width':'100%' };
  }
}

html

<div class="node container" [ngStyle]="style()">
  <div class="row">
    <div class="col-sm-3">{{job.job_JobId}}</div>
    <div class="col-sm-1">{{job.job_Status}}</div>
    <div class="col-sm-8">{{job.jobDefinition_SearchName}}</div>
  </div>
  <div class="child row">
    <div *ngFor="let child of job.childJobs">
      <hjobnode [depth]="depth+20" [job]="child"></hjobnode>
    </div>
  </div>
</div>

css

  style(): Object {
    return  { 'padding-left': this.depth + "px", 'width':'100%' };
  }

标签： javascripthtmlcssangular

解决方案

您使用填充的方法是正确的方法。最简单的方法是将这些项目相互嵌套，因此您无需考虑深度。

正如 Chris W. 所指出的，这可以很容易地表示为一个列表，使用ul(or ol) 和lis。

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li>ul {
  padding-left: 20px;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    <ul>
      <li>Item 2.1</li>
      <li>
        <ul>
          <li>Item 2.1.1</li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li>
    Item 3
    <!-- you can even nest the ul directly inside an item !-->
    <ul>
      <li>Item 3.1</li>
    </ul>
  </li>
</ul>

希望有帮助

推荐阅读