abn树在达到9级时无法正确显示答案

【问题标题】：abn tree fail to show correctly when reach to level 9abn树在达到9级时无法正确显示
【发布时间】：2016-12-16 06:19:37
【问题描述】：

我必须生成树视图，所以我在我的 spring boot jhipster 应用程序中使用 abn-tree 创建了树。

由于树将在运行时生成，并且树的级别（深度）不固定。我用 abn-tree 尝试了深度 8，但是当它进入第 9 级时，它的视图分散了。向右移动后添加的节点，整个树视图显示不正确。

我需要像 Windows 注册表编辑器这样的树形结构：

您可以通过将数据放入 app.js 中来检查问题：http://embed.plnkr.co/Nxi2Nl/：

var app = angular.module('plunker', ['angularBootstrapNavTree']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  var treedata_geography = [{
    label: 'North America',
    children: [{
      label: 'Canada',
      children: [{
      label: 'Canada',
      children: [{
      label: 'Canada',
      children: [{
      label: 'Canada',
     children: [{
      label: 'Canada',
     children: [{
      label: 'Canada',
     children: [{
      label: 'Canada',
      children: [{
      label: 'Canada',
      children: [{
      label: 'Canada',
      children: [{
      label: 'Canada',
      children: ['Toronto', 'Vancouver']
    }, {
      label: 'USA',
      children: ['New York', 'Los Angeles']
    }, {
      label: 'Mexico',
      children: ['Mexico City', 'Guadalajara']
    }]
    }, {
      label: 'USA',
      children: ['New York', 'Los Angeles']
    }, {
      label: 'Mexico',
      children: ['Mexico City', 'Guadalajara']
    }]
    }, {
      label: 'USA',
      children: ['New York', 'Los Angeles']
    }, {
      label: 'Mexico',
      children: ['Mexico City', 'Guadalajara']
    }]
    }, {
      label: 'USA',
      children: ['New York', 'Los Angeles']
    }, {
      label: 'Mexico',
      children: ['Mexico City', 'Guadalajara']
    }]
    }, {
      label: 'USA',
      children: ['New York', 'Los Angeles']
    }, {
      label: 'Mexico',
      children: ['Mexico City', 'Guadalajara']
    }]
    }, {
      label: 'USA',
      children: ['New York', 'Los Angeles']
    }, {
      label: 'Mexico',
      children: ['Mexico City', 'Guadalajara']
    }]
    }, {
      label: 'USA',
      children: ['New York', 'Los Angeles']
    }, {
      label: 'Mexico',
      children: ['Mexico City', 'Guadalajara']
    }]
    }, {
      label: 'USA',
      children: ['New York', 'Los Angeles']
    }, {
      label: 'Mexico',
      children: ['Mexico City', 'Guadalajara']
    }]
    }, {
      label: 'USA',
      children: ['New York', 'Los Angeles']
    }, {
      label: 'Mexico',
      children: ['Mexico City', 'Guadalajara']
    }]
    }, {
      label: 'USA',
      children: ['New York', 'Los Angeles']
    }, {
      label: 'Mexico',
      children: ['Mexico City', 'Guadalajara']
    }]
  }, {
    label: 'South America',
    children: [{
      label: 'Venezuela',
      children: ['Caracas', 'Maracaibo']
    }, {
      label: 'Brazil',
      children: ['Sao Paulo', 'Rio de Janeiro']
    }, {
      label: 'Argentina',
      children: ['Buenos Aires', 'Cordoba']
    }]
  }];
  $scope.my_data = treedata_geography;

});

我该如何解决这个问题。我尝试了各种css更改。如果这不能解决问题，那么最好在运行时生成具有展开折叠功能的树。

【问题讨论】：

标签： javascript angularjs spring-boot tree

【解决方案1】：

查看 .css 文件（您的问题中没有包含该文件，但您应该将相关代码放入其中）。

您会看到列表项只定义了 9 级缩进，因此在 9 级之后，它们会退回到左边距。 CSS 中的最后一级是：

ul.nav.nav-list.abn-tree .level-9 .indented {
  position: relative;
  left: 160px;
}

只需根据需要添加更多级别，并每缩进 20 个像素：

ul.nav.nav-list.abn-tree .level-10 .indented {
  position: relative;
  left: 180px;
}

ul.nav.nav-list.abn-tree .level-11 .indented {
  position: relative;
  left: 200px;
}

等等。等等

【讨论】：