Question

我正在尝试使用jstree，并在打开页面时打开一个节点及其所有父节点。这是我用来测试的html代码。

    <div id="treeTask">
       <ul>
          <li id="node_37"><a href="#">TEST1</a>
              <ul>
                  <li id="node_38"><a href="#">TEST2</a></li>
                  <li id="node_39"><a href="#">TEST3</a></li>
              </ul>
          </li>
      </ul>

      <ul>
          <li id="node_3"><a href="#">TEST1</a>
              <ul>
                  <li id="node_4"><a href="#">TEST2</a></li>
                  <li id="node_6"><a href="#">TEST3</a></li>
              </ul>
          </li>
      </ul>
   </div>

这是调用初始化jstree并打开节点。

 $(function () { 
        $("#treeTask").jstree();

        $("#treeTask").bind("ready.jstree", function (event, data) { 
            $("#treeTask").jstree("open_node", $("#node_4"));

            if((data.inst._get_parent(data.rslt.obj)).length) { 
                data.inst._get_parent(data.rslt.obj).open_node(this, false); 
              }  
        }); 

  });

我一直在操纵代码，但无法使其正常工作。如果有人能提供帮助我真的很感激。

非常感谢！

Answer 1

您可以使用内置的_open_to功能：
http://www.jstree.com/api/#/?q=open_to&f=_open_to%28obj%29

$("#treeTask").jstree().bind('ready.jstree', function (event, data) { 
  data.instance._open_to('node_4');
});

Answer 2

基于@maddin解决方案，我已将其更新为支持任意数量的父级别。

jsFiddle

$("#treeTask").jstree().bind('ready.jstree', function (event, data) { 
  $("#treeTask").jstree('open_node', 'node_4', function(e,d) {
    for (var i = 0; i < e.parents.length; i++) {
      $("#treeTask").jstree('open_node', e.parents[i]);
    };
  });
});

应该注意，如果选择了一个节点，它的所有父节点将自动打开。这有点等同于上述内容：

$("#treeTask").jstree().bind('ready.jstree', function (event, data) { 
  $("#treeTask").jstree('select_node', 'node_4');
});

Answer 3

也许这是解决问题的方法：

fiddle

$("#treeTask").jstree().bind('ready.jstree', function (event, data) { 
 $("#treeTask").jstree('open_node', 'node_4', function(e,d) {
     if(e.parents.length){
         $("#treeTask").jstree('open_node', e.parent);
     };
  });
});

使用jstree打开一个节点及其所有父节点

3 个答案: