如何在zTree中向上滚动,以使所选节点位于树的顶部?

时间:2018-08-31 17:13:41

标签: javascript jquery ztree

我正在与zTree jQuery plugin一起创建文件夹层次结构树。当我在树中创建新文件夹时,我希望树向上滚动,以使父文件夹位于顶部。这样,很容易看到父级的所有子级,因为父级文件夹的位置尽可能高。

您知道在zTree中向上滚动以便所选文件夹位于顶部的方法吗?


更新

这是一个演示zTree的jsfiddle。您可以通过输入名称并单击创建按钮来添加新节点。

新节点将出现在选定节点的下方,如果没有选定节点,则将出现在根目录下。

https://jsfiddle.net/o61Lpbsw/22/

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.33/js/jquery.ztree.all.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.33/css/zTreeStyle/zTreeStyle.css"/>

<div>
    <ul id="treeDemo" class="ztree"></ul>
    <input type="text" id="childName"/>
    <button type="button" id="create">Create child</button>
</div> 

var zTree = null;

var setting = { };

var zNodes =[
  { name:"pNode 01", open:true,
   children: [
     { name:"pNode 11", open: true,
      children: [
        { name:"leaf node 111"},
        { name:"leaf node 112"},
        { name:"leaf node 113"},
        { name:"leaf node 114"}
      ]},
     { name:"pNode 12", open: true,
      children: [
        { name:"leaf node 121"},
        { name:"leaf node 122"},
        { name:"leaf node 123"},
        { name:"leaf node 124"}
      ]},
     { name:"pNode 13 - no child", open: true, isParent:true}
   ]},
  { name:"pNode 02", open: true,
   children: [
     { name:"pNode 21", open:true,
      children: [
        { name:"leaf node 211"},
        { name:"leaf node 212"},
        { name:"leaf node 213"},
        { name:"leaf node 214"}
      ]},
     { name:"pNode 22", open: true,
      children: [
        { name:"leaf node 221"},
        { name:"leaf node 222"},
        { name:"leaf node 223"},
        { name:"leaf node 224"}
      ]},
     { name:"pNode 23", open: true,
      children: [
        { name:"leaf node 231"},
        { name:"leaf node 232"},
        { name:"leaf node 233"},
        { name:"leaf node 234"}
      ]}
   ]},
  { name:"pNode 3 - no child", open: true, isParent:true}

];

function bind() {
    $('#create').click(function() {
      var name = $('#childName').val();

      var selNode = zTree.getSelectedNodes()[0];

      var child = {name: name};

      zTree.addNodes(selNode, child);  
  });
}

$(document).ready(function(){
  zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

  bind();
});

添加新节点后,我希望树向上滚动,以使新节点的父节点位于屏幕顶部。

该怎么做?

0 个答案:

没有答案