jsTree库 - 为什么我不能创建多个嵌套节点?

时间:2016-07-16 21:26:54

标签: javascript jstree

我之前从未使用过这个库,我还在学习它。所以我找到了一种方法,通过使用函数将节点附加到已创建的树。我正在使用此函数将子节点附加到已创建的主节点或自己创建主节点。

但问题是我只能创建一个子节点,并且无法创建子节点的子节点。这是我的代码:

$(function () {
    $('#jstree').jstree({
        'plugins': ["contextmenu", "dnd", "state"],
        'core': {
            'data': [{
                "id": "1",
                "text": "1",
                "state": {
                    "opened": false
                }
            }],
            'check_callback': true
        }

    });
});

$('#jstree').on('ready.jstree', function (e, data) {
        createNode("#1", "11", "1.1", "last");
    createNode("#jstree", "2", "2", "last");
        createNode("#2", "21", "2.1", "last");
            createNode("#21", "211", "2.1.1", "last");
    createNode("#jstree", "3", "3", "last");
        createNode("#3", "31", "3.1", "last");
        createNode("#3", "32", "3.2", "last");
            createNode("#32", "321", "3.2.1", "last");
            createNode("#32", "322", "3.2.2", "last");
        createNode("#3", "33", "3.3", "last");
    createNode("#jstree", "4", "4", "last");
        createNode("#4", "41", "4.1", "last");

});


function createNode(parent_node, new_node_id, new_node_text, position) {
    $('#jstree').jstree('create_node', $(parent_node), { "text":new_node_text, "id":new_node_id }, position, false, false);
}

所以我的问题是,在浏览器上没有呈现id为:211,321,322的节点,控制台上没有错误。

我想念一下吗?也许我不了解它的库的一些属性,当我调用jstree()函数来创建主树时,我应该将它添加到JSON中?

P.S。解决:

无论如何,我发现了一种更灵活的方法。

var jsonDataMain = {
    'plugins': ["contextmenu", "dnd", "state"],
    'core': {
        'check_callback': true,
        'data': [{
            "id": "1",
            "text": "1",
            "children": [{
                "text": "1.1",
                "id": "11"
            },
                {
                    "text": "1.2",
                    "id": "12"
                },
                {
                    "text": "1.3",
                    "id": "13"
                },
                {
                    "text": "1.4",
                    "id": "14"
                }]
        },
            {
                "id" : "2",
                "text" : "2",
                "children": [{
                    "text": "2.1",
                    "id": "21"
                },
                    {
                        "text": "2.2",
                        "id": "22"
                    },
                    {
                        "text": "2.3",
                        "id": "23",
                        "children": [{
                            "text" : "2.3.1",
                            "id" : "231",
                            "children": [{
                                "text" : "2.3.1.1",
                                "id" : "2311"
                            }]
                        }]
                    },
                    {
                        "text": "2.4",
                        "id": "24"
                    }]
            }]
    }

};

$(function () {
    $('#jstree').jstree(jsonDataMain);
});

$('#jstree').on('rename_node.jstree', function (e, data) {

    jsonDataMain.core.data.push({
        "id": "3",
        "text": "3",
        "children": [{
            "text": "3.1",
            "id": "31"
        }]
    });

    $('#jstree').jstree(true).settings.core.data = jsonDataMain.core.data;
    $('#jstree').jstree(true).refresh();

});

所以在这种情况下我有一个对象。我调用jsTree函数,我将这个对象作为参数。

之后当我捕获一些事件(在这种情况下是它的contextmenu的重命名事件)时,我只是在object.core.data中添加一些新节点,当触发事件时,节点被添加到树中这两行

$('#jstree').jstree(true).settings.core.data = jsonDataMain.core.data;
$('#jstree').jstree(true).refresh();

当然,如果要在刷新页面时将新添加的节点保留为三个,则需要保留用于在某种DataBase中创建树的对象或此JS文件之外的对象以及更改时它使用像PUT请求之类的东西,改变它然后你会保留变化。

我认为这是创建树并提前更改树的好方法。我希望我会帮助那些有我解决方案的人。

0 个答案:

没有答案