我正在使用 abn 树在前端使用 AngularJS html 生成带有一些数据的树。树的深度由运行时决定。首先，树将加载完全展开到最后一级的条件，例如当我单击:11-B-(iii) 时，它会伸展树(Splay Tree)，如图所示:
具有选定子文本的树:11-B-(iii)
由于树是使用 abn 树生成的，因此工作正常。
当第一次加载显示选择的树的最后一个元素时，这已经完成。
代码块:
<div class="col-sm-4" style="min-height:580px;max-height:600px;overflow:scroll;border:1px solid grey;">
<ul class="nav nav-list nav-pills nav-stacked abn-tree ng-isolate-scope" tree-data="my_data" tree-control="my_tree" on-select="vm.my_tree_handler(branch)" expand-level="10">
<!-- ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 1 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-1">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-minus glyphicon glyphicon-minus fa fa-minus" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">Root </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 2 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-2">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-minus glyphicon glyphicon-minus fa fa-minus" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">Child-I </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubChild-1</span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubChild-2</span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubChild-3</span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubChild-4</span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubChild-5</span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubChild-6 </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubChild-7 </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubChild-8 </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubChild-9 </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubChild-10 </span>
</a>
</li>
<li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-minus glyphicon glyphicon-minus fa fa-minus" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubChild-11 </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 4 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-4">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubSubchild-A </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 4 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-4">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-minus glyphicon glyphicon-minus fa fa-minus" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubSubchild-B </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 5 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-5">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubSubSubchild-(i) </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 5 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-5">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubSubSubchild-(ii) </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 5 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-5 active">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubSubSubchild-(iii) </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 4 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-4">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubSubchild-C </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 4 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-4">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubSubchild-D </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 4 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-4">
<a ng-click="user_clicks_branch(row.branch)">
<i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
<span class="indented tree-label ng-binding">SubSubchild-E </span>
</a>
</li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid -->
</ul>
</div>
需要注意的地方:
- 树的深度不固定。它可能会根据单击加载树的文本而有所不同。
- 树结构不会相同。它可能会根据单击加载树的文本而有所不同。
- 首先用户不会点击任何节点，我只需要在顶部显示滚动即可显示选定的子节点，而无需滚动。
我需要做什么？
我需要将 div 的光标设置到 div 顶部某处可见点处的选定元素 li 上，以便用户无需向下滚动即可看到选定的 div。在给定的示例中，树加载了少量元素，但实际树将加载许多子元素及其子子层次结构。
我尝试获取值并与字符串匹配，但加载时我不知道树的深度。我只知道一件事就是最后选择的节点的名称，在示例中:SubSubSubchild-(iii)
如何将div的光标设置到顶部的特定点以在顶部显示div？
最佳答案
jQuery 是一种解决方案。
检查你的代码后，我发现你一直在使用ABN树，所以你可以做的是，找到具有事件类的li的索引(默认在ABN树中选择)并设置它的scrollTop属性。
var index=$("#treeDiv ul li.active").index();
$("#treeDiv").scrollTop(index*15);
注意:将索引值乘以每个里的高度。 这是Fiddler这是我根据你的询问制作的。
关于javascript - 将div光标设置到嵌套li的选定值的点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42786300/