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

【问题标题】：Open one node and all its parents using jstree使用 jstree 打开一个节点及其所有父节点
【发布时间】：2014-12-26 18:07:28
【问题描述】：

我正在尝试使用 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); 
              }  
        }); 

  });

我一直在操作代码一段时间，但无法使其工作。如果有人可以提供帮助，我将不胜感激。

非常感谢！

【问题讨论】：

标签： jstree

【解决方案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');
});

【讨论】：

这个函数是私有的或者我可以安全地使用它吗？在大多数框架中，此类内部功能在未来可能会发生变化。

【解决方案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');
});

【讨论】：

你可以在没有for循环的情况下调用$("#treeTask").jstree('open_node', e.parents);，因为id数组可能会传递给open_node函数

【解决方案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);
     };
  });
});

【讨论】：