Библиотека jsTree - Почему я не могу создать более одного вложенного узла?

Question

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

Но проблема в том, что я могу создать только один дочерний узел и не могу создать дочерний узел для дочернего узла. Вот мой код:

$(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 не отображаются в браузере, и на консоли нет ошибок.

Я что-то пропустил? Может быть, какое-то свойство библиотеки, о котором я не знаю, и мне следует добавить его в JSON, когда я вызываю функцию jstree() для создания главного дерева?

PS решено:

Во всяком случае я нашел более умный способ сделать его гибким.

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();

Конечно, если вы хотите сохранить новый добавленный узел в тройке при обновлении страницы, вам нужно будет сохранить объект, который используется для создания дерева, в какой-либо базе данных или что-то вне этого файла JS и при изменении его на использование что-то вроде запроса PUT, измените его, и тогда вы сохраните изменения.

Я думаю, что это хороший способ создать свое дерево и изменить его заранее. Я надеюсь, что я помогу кому-то с моими решениями.