将div光标设置为嵌套li

时间:2017-03-14 12:40:19

标签: javascript jquery angularjs tree

我正在使用abn树来生成带有前端AngularJS html的一些数据的树。树的深度取决于运行时间。首先,树将被加载完全扩展到最后一级的条件,例如当我点击时:11-B-(iii)然后它展开树,如图所示:

带有选定子项的树文本: 11-B-(iii)

Tree with selected child for text : 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?

1 个答案:

答案 0 :(得分:1)

jQuery是一种解决方案。

在检查你的代码后,我发现你一直在使用ABN树,所以你可以做的是找到一个具有活动类的li的索引(在ABN树中选择了默认值)并设置它的scrollTop属性。

var index=$("#treeDiv ul li.active").index();
$("#treeDiv").scrollTop(index*15); 

注意:将每个li的高度乘以索引值。 这是我根据您的查询制作的Fiddler