Question

我尝试使用jstree插件创建一个树。我想在用户选择选项时更改树内容。我让jsfiddle显示我的问题：http://jsfiddle.net/hy5LF/

当您第一次从选择输入中选择一个数字时，您会获得完美的树，但在您第二次选择它之后它将无法正常工作。我得到节点列表而不是实际树。

这是我显示所选树的功能：

function PrintTree(nr) {
    var myNode = document.getElementById("html1");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }
    $('#html1').append('<ul></ul>');

    var elements = [];

    switch (nr) {
        case '1':
            elements.push("Saab");
            elements.push("Volvo");
            elements.push("BMW");
            break;
        case '2':
            elements.push("1");
            elements.push("2");
            elements.push("3");
            break;
        case '3':
            elements.push("a");
            elements.push("b");
            elements.push("c");
            break;
    }

    for (var i = 0; i < elements.length; i++) {
        $('#html1 ul').append('<li>' + elements[i] + '</li>');
    }

    $('#html1').jstree();
}

$(document).ready(function () {
    $("#sel").change(function () {
        var val = $(this).val();
        PrintTree(val);
        $('#html1').jstree();
    });
});

Answer 1

参考演示：JSFIDDLE 您必须使用destroy销毁前一个jstree实例。

代码：

function PrintTree(nr) {
    var myNode = document.getElementById("html1");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }
    $('#html1').append('<ul></ul>');

    var elements = [];

    switch (nr) {
        case '1':
            elements.push("Saab");
            elements.push("Volvo");
            elements.push("BMW");
            break;
        case '2':
            elements.push("1");
            elements.push("2");
            elements.push("3");
            break;
        case '3':
            elements.push("a");
            elements.push("b");
            elements.push("c");
            break;
    }

    for (var i = 0; i < elements.length; i++) {
        $('#html1 ul').append('<li>' + elements[i] + '</li>');
    }

    //$('#html1').jstree();
}

$(document).ready(function () {
    $("#sel").change(function () {
        $('#html1').jstree('destroy');//destroy the previous instance before initializing a new one
        var val = $(this).val();
        PrintTree(val);

        $('#html1').jstree();
    });
});

Answer 2

我不是jstree专家，但我想在元素上调用jstree()可能有问题，那已经是jstree了。

所以我每次调用都会删除并再次创建div，现在可以正常工作：http://jsfiddle.net/hy5LF/4/

此外，我做了一些小的更新，但只是非常简单的事情：

function PrintTree(nr) {

    var wrapper = $("<div>");
    wrapper.insertAfter('#html1');
    $('#html1').remove();
    wrapper.attr('id', 'html1');
    wrapper.show(); // for some reason my new element were not visible?!? 
                    // So I had to display it... 

    var list = $("<ul>");
    wrapper.append(list);

    var elements = [];

    switch (nr) {
        case '1':
            elements.push("Saab");
            elements.push("Volvo");
            elements.push("BMW");
            break;
        case '2':
            elements.push("1");
            elements.push("2");
            elements.push("3");
            break;
        case '3':
            elements.push("a");
            elements.push("b");
            elements.push("c");
            break;
    }


    for (var i = 0; i < elements.length; i++) {
        list.append('<li>' + elements[i] + '</li>');
    }

    wrapper.jstree();
}

$(document).ready(function () {
    $("#sel").change(function () {
        var val = $(this).val();
        PrintTree(val);
    });
});

使用jstree插件显示所选树

2 个答案: