如何以编程方式选择特定节点？答案

【问题标题】：How to select a specific node programmatically?如何以编程方式选择特定节点？
【发布时间】：2011-12-11 18:27:27
【问题描述】：

我有一个 jstree。我想选择绑定到 id 为 158 的位置的对象的节点。这可行，但似乎很愚蠢。这样做更惯用的方法是什么？

var $tree = $('.jstree', myContext),
    node = $tree.find('li').filter(function() { 
        return ( $(this).data().location || {}).id === 158;
    });
$tree.jstree('select_node', n)

【问题讨论】：

上面的代码对你不起作用？你能提供jsfidlle示例吗？
@Radek - 它有效，但似乎必须有比“获取所有 li 并测试他们的数据”更好的方法。感觉就像我找不到前门并且正在使用侧门。例如，如果树结构在过滤时发生更改，或者手动添加/删除列表项，这可能会中断。
我有同样的问题，但我在那里找到的每个解决方案都假设我有一些神秘的“ID”可供选择。但我没有。我只有一个递归 JSON 字典/数组，没有 ID。有没有办法只通过路径来选择节点，比如/path/to/some/file？

标签： jstree

【解决方案1】：

只是想在这里插话，因为没有一个答案对我有用。最终 DID 的工作非常简单：

$('#someTree').jstree('select_node', 'someNodeId');

请注意，我没有将 someNodeId 初始化为 jQuery 对象。这只是一个普通的字符串。

我在加载树后立即执行此操作没有将其放入“就绪”绑定事件中，因为这似乎没有必要。

希望它能从令人沮丧的几个小时中拯救一些人。 . .

在加载后挂接到树：

.on('loaded.jstree', function() {
    // Do something here...
  });

【讨论】：

loaded.jstree 部分帮助了我。
它有效，但我不喜欢基于字符串的方法调用。我更喜欢 $("#someTree").jstree().select_node(["nodeId1", "nodeId2"]) 语法。
@shantaram--太好了，很高兴它帮助了你。一定要喜欢 stackoverflow！
@MattCashatt 我有一个问题，如何在 $('#someTree').jstree('select_node', 'someNodeId'); 中创建someNodeId 的对象。 here我发布了一个关于它的问题。

【解决方案2】：

基于jsTree groups你可以试试

jQuery("#getStartedTree").jstree("select_node", "#test2");

如果数据看起来像

The JSON in the TextFile.txt - borrowed from your simple example
 [
     {
     "data" : "A node",
     "children" : [ "Child 1", "Child 2" ]
     },
     {
     "attr" : { "id" : "test1" },
         "data" : {
             "title" : "Long format demo",
             "attr" : { "id" : "test2", "href" : "#" }
         }
     }
 ]

和 jsTree 设置

My tree container is <div id="getStartedTree">

My jsTree code
 $("#getStartedTree").jstree({
            "themes": {
                "theme": "default",
                "url": "../App_Css/Themes/Default/style.css",
                "dots": true,
                "icons": true
            },
            "json_data": {
                "ajax": {
                    "url": "../SiteMaps/TextFile.txt",
                    "dataType": "json",
                    "data": function(n) {
                        return { id: n.attr ? n.attr("id") : 0 };
                    }
                }
            },
            "plugins": ["themes", "json_data", "ui"]
        });

这就是你所追求的吗？

【讨论】：

但是在这里你必须在创建节点时为节点分配 id 并以某种方式找出相关的 id。我不知道他们是如何实现的，但我正在寻找的 API 类似于 get_node_bound_to。 var treeData = $jstree.jstree('data'), nodeData = findCorrectNodeIn(data); node = $jstree.jstree('get_node_bound_to', nodeData); $jstree.jstree('select_node', node);
什么时候给你的节点分配id？以及如何？
如果他们不提供这样做的方法，我会非常震惊。 li 技术并没有那么好用。例如，当包含 jstree 的对话框打开时，我需要为符合特定条件的数据选择一个节点。使用这个 li hack 我必须监听加载的事件，然后才能进行选择。
目前，这一切都是基于动态数据，并且控件是由另一个没有生成ID的开发人员编写的。但似乎真的没有理由使用它们。我知道我想要的数据节点的标准，这些数据节点是 jstree 的模型。事实上，如果我提取同一个 jstree 的多个并排副本，使用 id 会显式失败。
如果您没有 id，您必须进行某种搜索，对吧。

【解决方案3】：

我做到了：

$('.jstree').jstree(true).select_node('element id');

这段代码：

jQuery.each(produto.categorias, function(i, categoria) {
    $('#lista-categorias').jstree(true).select_node(categoria.dadoCategoria.id);
});

【讨论】：

这对我有用，但我必须先取消选择。我是用 $('#f_tree').jstree(true).deselect_all(true);

【解决方案4】：

我能够模拟单击 jstree 节点作为选择节点的替代方法。使用的代码如下：

$(treeIdHandle + " li[id=" + nodeId + "] a").click();

【讨论】：

这将要求每个节点都有一个 id 属性，这是默认情况下不可用的东西之一（如果是这样的话，性能会很糟糕）。但是，在您存在 id 的情况下，应该可以简化为 $('a', '#'+nodeId).click()
是的，它要求每个节点都有一个 id 属性，甚至任何其他可以唯一标识树中节点的属性。

【解决方案5】：

如果您使用 HTML 而不是 JSON 数据填充树并且想知道如何设置 node_id，您只需要设置 <li> 元素的 id 属性！

<div class="tree-menu">
    <ul class="menu">
        <li id="node_1">
            Node 1 - Level 1
           <ul class="menu">
               <li id="node_3">
                   Node 3 - Level 2
               </li>
           </ul>
        </li>
        <li id="node_2">
            Node 2 - Level 1
        </li>
    </ul>
</div>

然后

$('.tree-menu')
    .jstree(true)
    .select_node("node_3");

将选择Node 3 - Level 2 节点。

对于遇到 javascript 错误的人，请记住使用完整版 jQuery，而不是精简版！

对于所有反对的投票者，以下是证明它有效的演示： https://jsfiddle.net/davidliang2008/75v3fLbs/7/

【讨论】：

Uncaught TypeError: [...] .jstree(...).select_node is not a function
查看我的更新...请不要因为遇到错误而投反对票。

【解决方案6】：

我使用 jstree 3.0.8。不要使用“状态”

'plugins' : ['dnd','sort','types','contextmenu','wholerow','ui']

服务器提供json，选中的节点有

“状态”：{“选定”：真，“打开”：真}

【讨论】：

这听起来很有希望，但您能否提供一个更好的示例或一些文档？对于刚开始使用 jstree 的人来说，这还不够。

【解决方案7】：

这个解决方案适合我

// after the tree is loaded
$(".jstree").on("loaded.jstree", function(){
    // don't use "#" for ID
    $('.jstree').jstree(true).select_node('ElementId');
});

甚至在 php 循环中（动态）：

$(".jstree").on("loaded.jstree", function(){
    <?php foreach($tree as $node): ?>
        $('.jstree').jstree(true).select_node('<?=$node?>');
    <?php endforeach;?>
});

希望这对你有用。

【讨论】：

这不能回答问题。它询问如何选择绑定到给定对象的节点 - 而不是 dom 元素。如果您阅读了最佳答案中的 cmets，则会对此进行讨论。

【解决方案8】：

我认为你应该在 jstree 初始化后编写代码来选择节点，因此使用此代码

 $('#jstree')
    .on('ready.jstree', function (e, data) {
       // do function after jstree initialized
      $('#jstree')
        .jstree(true)
        .select_node('nodeid');
    });

希望它的工作:)

【讨论】：

欢迎来到 StackOverflow。这并不是问题的真正答案。问题不在于使用 nodeid，而在于如何通过生成节点的对象的任意属性进行选择。

【解决方案9】：

触发点击第一个锚点

$("#jstree .jstree-anchor:first").click();

或按节点 ID 158

$("#jstree #158").find(".jstree-anchor:first").click(); 

$('#' + 158).find(".jstree-anchor:first").click();

【讨论】：

这并不是问题的真正答案