Question

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

Answer 1

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

您会看到只为列表项定义了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;
}

等。等

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

1 个答案: