jquery - JS 树 - select_node 不起作用

Question

我在 JSTree 和 Ajax 方面遇到了一个奇怪的问题。

我通过 Ajax/PHP 请求生成我的树，该请求使用...生成 HTML(带有 UL、LI、A 标签)

$.ajax({
    url: 'ajaxTreeView.php?method=edit&partid='+partId,
    cache: false,
    success: function(tree)
    {
        $('#treeViewer').html(tree);
    }});

并使用...激活代码上的 JStree

options = 
{
    "core": { animation: 120 },
    "themes": { theme: 'corral', dots: true },
    "types": 
    { 
        "types": 
        { 
            "parent": { "icon": { "image": "images/custom/Legend/node_select.png" } },
            "child": { "icon": { "image": "images/custom/Legend/node_select_child.png" } },
            "current": { "icon": { "image": "images/custom/Legend/node.png" } }
        }
    },
    "plugins": [ "html_data", "types", "themes", "ui", "contextmenu", "cookies" ],
    "ui": { "select_limit" : 1 },
    "cookies": { "save_selected" : false }
};

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

我似乎无法轻松选择节点。我尝试了initial_select，但这似乎不起作用，而且也不理想，因为我经常想以编程方式选择节点。

我尝试使用...

$('#tree').jstree("select_node", '#ref565', true);

如果我通过超链接调用该函数，则此方法有效，但如果我在初始化 JStree 后调用该函数，则此方法无效。

我通过添加警报看到(所有这一切都发生在 Ajax Success 例程中)...

$('#treeViewer').html(tree);
$("#tree").jstree(options);
alert('test');
$('#tree').jstree("select_node", '#ref565', true);

...在警报开始之前树尚未渲染。

我添加了一个setTimeOut...

$('#treeViewer').html(tree);
$("#tree").jstree(options);
setTimeout(function() {selectNode(565);},1250);
$('#tree').jstree("select_node", '#ref565', true);

...这有效。

我显然是愚蠢的。我使用了错误的语法吗？为什么我必须设置延迟才能选择节点？

请帮忙。

Answer 1

如果您想在树加载后最初选择某些节点，则应该使用 initially_select ui 的选项插入。您说您尝试过，但我没有看到您发布的示例代码中使用了它。您确定提供的 ID 正确吗？

要以编程方式选择节点，您需要等待要选择的节点首先出现在 DOM 中。我猜测绑定(bind)到 loaded.jstree 事件更正确，而不是使用超时回调，该事件应该在树完成加载并且所有树元素都在DOM，并在其中进行编程选择。

显示用法的示例代码:

$(function () {

    $("#tree")
        .jstree({ 
            // List of active plugins
            "plugins" : [ 
                "ui"
            ],

            // UI & core - the nodes to initially select and open will be overwritten by the cookie plugin
            // the UI plugin - it handles selecting/deselecting/hovering nodes
            "ui" : {
                // this makes the node with ID node_4 selected onload
                "initially_select" : [ "#ref565" ]
            },
            // the core plugin - not many options here
            "core" : { 
                // just open those two nodes up
                // as this is an AJAX enabled tree, both will be downloaded from the server
                "initially_open" : [ "#ref565" ] 
            }
        })
        .bind("loaded.jstree", function (e, data) {
                  $('#tree').jstree("select_node", '#ref565', true); 
        }) 
});