javascript - 达到第9级时，abn树无法正确显示

我必须生成树视图，因此我已经在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更改。如果这不能解决问题，那么什么时候最好使用扩展折叠功能在运行时生成树。

最佳答案

查看.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;
}

等等等

关于javascript - 达到第9级时，abn树无法正确显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41178369/