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

Question

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

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

Answer 1

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

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

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

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

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

在加载后钩入树：

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

Answer 2

基于jsTree 组，您可以尝试

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"]
        }); 

这就是你所追求的吗？

Answer 3

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

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

Answer 4

我是这样做的：

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

这段代码：

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

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

Answer 6

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

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

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

"state":{"selected":true,"opened":true}

Answer 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;?>
});

希望这对你有用。

Answer 8

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

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

希望它的工作:)

Answer 9

触发点击第一个锚点

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

或通过节点 ID 158

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

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