Как программно выбрать конкретный node?

У меня есть jstree. Я хочу выбрать node, который привязан к объекту с местоположением с идентификатором 158. Это работает, но кажется глупым. Какой более идиоматический способ сделать это?

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

Ответы

Ответ 1

Просто хотел перезвонить, так как ни один из ответов не работал у меня. Что, наконец, работало очень просто:

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

Обратите внимание, что я не инициализировал someNodeId как объект jQuery. Это простая строка.

Я сделал это сразу после того, как дерево было загружено, не помещая его в "готовое" событие привязки, поскольку оно кажется не необходимым.

Надеюсь, это спасет кого-то из нескольких разочаровывающих часов.,.

Чтобы подключиться к дереву после его загрузки:

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

Ответ 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"]
        });

Это то, что вам нужно?

Ответ 3

Мне удалось имитировать щелчок на jstree node как альтернативный способ выбора node. Используется следующий код:

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

Ответ 4

Я использую jstree 3.0.8. не используйте "состояние"

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

и сервер предлагают json, выбранный node имеет

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

Ответ 5

Я сделал это с помощью

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

этот код:

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

Ответ 6

Это решение работает для меня

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

Надеюсь, это сработает для вас.

Ответ 7

Если вы node_id дерево, используя HTML вместо данных JSON, и задаетесь вопросом, как установить node_id, вам просто нужно установить атрибут id элемента <li> !

<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.