Javascript abn树到达9级时无法正确显示
我必须生成树视图,所以我在spring boot jhipster应用程序中使用abn tree创建了树 因为树将在运行时生成,并且树的级别(深度)不是固定的。我尝试了abn树的深度8,但当它达到9层时,它的视图分散了。向右移动后添加的节点和整个树视图显示不正确 我需要类似Windows注册表编辑器的树结构,如下所示: 通过将数据放入app.js,您可以在以下位置检查问题:Javascript abn树到达9级时无法正确显示,javascript,angularjs,spring-boot,tree,Javascript,Angularjs,Spring Boot,Tree,我必须生成树视图,所以我在spring boot jhipster应用程序中使用abn tree创建了树 因为树将在运行时生成,并且树的级别(深度)不是固定的。我尝试了abn树的深度8,但当它达到9层时,它的视图分散了。向右移动后添加的节点和整个树视图显示不正确 我需要类似Windows注册表编辑器的树结构,如下所示: 通过将数据放入app.js,您可以在以下位置检查问题: var app = angular.module('plunker', ['angularBootstrapNavTr
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;
}
等等等等