jsTree 打开一个分支答案

【问题标题】：jsTree Open a branchjsTree 打开一个分支
【发布时间】：2010-11-13 05:25:37
【问题描述】：

我正在使用 JQuery 插件 jsTree，http://www.jstree.com/ 我可以通过以下方法扩展整棵树：

$("#tree").jstree("open_all");

还有一个特定的节点：

$("#tree").jstree("open_node", $('#childNode'));

我在打开树的一个分支时遇到困难，打开的分支可以很好地打开它，但如果它有一个父级，则不会打开它。

有没有人用 jsTree 成功地做到了这一点？如果您需要更多信息，请告诉我。

谢谢

伊夫

【问题讨论】：

标签： javascript jquery treeview jstree

【解决方案1】：

您的开放分支代码是正确的。

例如。树的来源：

    <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>
   </div>

打开节点：

$("#treeTask").jstree("open_node", $("#node_38"));

【讨论】：

工作就像一个魅力！ :D
之所以有效，是因为您在 HTML 中定义了节点，因此它们都已加载，并且在您调用 open_node 时构建了 DOM。不幸的是，如果您使用 JSON 数据来构建树，情况并非如此。

【解决方案2】：

尝试使用此代码打开节点直到第 n 级

$("#myTree").jstree({options}).bind('loaded.jstree', function (e, data) {
    /** 
     * Open nodes on load (until x'th level) 
     */
    var depth = 3;
    data.inst.get_container().find('li').each(function (i) {
        if (data.inst.get_path($(this)).length <= depth) {
            data.inst.open_node($(this));
        }
    });
});

【讨论】：

一个非常好的解决方案。
迟到总比不到好！ :-D @martincarlin87
你能告诉我在选项变量中传递什么吗？请问？？
TypeError: data.inst is undefined
@JavascriptCoder 现在重命名为data.instance

【解决方案3】：

你可以使用绑定

$("#tree").bind("open_node.jstree", function (event, data) { 
  if((data.inst._get_parent(data.rslt.obj)).length) { 
    data.inst._get_parent(data.rslt.obj).open_node(this, false); 
  } 
});

【讨论】：

最后不应该有某种“解除绑定”吗？
@NirO。什么原因？

【解决方案4】：

这是可以打开特定节点及其所有父节点的函数。

function expandNode(nodeID) {
    // Expand all nodes up to the root (the id of the root returns as '#')
    while (nodeID != '#') {
        // Open this node
        $("#jstree").jstree("open_node", nodeID)
        // Get the jstree object for this node
        var thisNode = $("#jstree").jstree("get_node", nodeID);
        // Get the id of the parent of this node
        nodeID = $("#jstree").jstree("get_parent", thisNode);
    }
}

【讨论】：

【解决方案5】：

我发现 Ted 的代码可以正常工作，但不得不稍作改动：

 $('#jsTree').bind("open_node.jstree", function (event, data) { 
      if((data.inst._get_parent(data.rslt.obj)).length) { 
        data.inst.open_node(data.inst._get_parent(data.rslt.obj), false,true); 
      } 
    });

【讨论】：

当年我还是泰德 :)

【解决方案6】：

如果你使用json就用这个

$("#treeId").on
('loaded.jstree', function() {
 $("#treeId").jstree("open_node", $("#nodeId"));
 });

【讨论】：

【解决方案7】：

以前没有一个对我有用，所以我创建了这段代码，它就像一个魅力:)

$('#tree').on('open_node.jstree', function (event, data) { 
    if(data.node.parent !== "#") { 
        data.instance.open_node(data.node.parent); 
    } 
});

【讨论】：

【解决方案8】：

    // Expand pasted, dragged and dropped node for jstree 3.3.1
        var objtree = $('#jstree');
        objtree.bind('paste.jstree', function(e, d) { objtree.jstree('open_all', '#' + d.parent); });
        $(document).bind('dnd_move.vakata', function(e, d) { objtree.jstree('open_all', $(d.event.target).closest('.jstree-node').attr('id')); });
        $(document).bind('dnd_stop.vakata', function(e, d) { objtree.jstree('open_all', $(d.event.target).closest('.jstree-node').attr('id')); });

【讨论】：

欢迎来到 StackOverflow。请在您的答案中添加更多详细信息并解释为什么这是“正确”的方法