Добавление данных об узлах дерева в базу данных

Question

При построении простого дерева в браузере, нужно записать данные об узлах дерева в базу данных.

Это код который отрисовывает само дерево: script.js

$(document).ready(function () {
let root = "<ul class='ul' style='list-style-type: none;'>" +
    "<li><p id='root' class='mb-0 pl-3'>Root</p><button class='delete btn btn-danger'>- 
</button> <button class='add btn btn-success'>+</button>" +
    "</li></ul>";
$("#create-root").click(function () {
    $("#tree").append(root);
    $("#create-root").remove();
});
$('#tree').on('click', '.add', function () {
    $(this).closest('li').append(root);
});
$('#tree').on('click', '.delete', function () {
    $(this).closest('li').remove();
});
});

index.html

<body class="my-2 mx-3">
<button id="create-root" class="btn btn-success">Create root</button>
<div id="tree"></div>

В базу должны попадать данные id родительского узла id дочернего узла и текст узла.

id | parent_id | text
1  |     0     | root
2  |     1     | root
3  |     1     | root
4  |     2     | root

Застрял на этапе какие данные передавать в файл main.php при добавлении узла, а так же при удалении узла с его дочерними узлами. То есть как обозначить что создан корень дерева и последующие его узлы? и данные об создании узлов записать в базу данных или же данные о удалении узлов удалить из базы данных.

Answer 1

При добавлении узла дерева добавлять информацию о нем и его родителе куда-нибудь в этот элемент. В примере ниже это тег <p>, в общем-то не важно.

var lastId = 0;     // последний созданный id

$(document).ready(function () {
    $("#create-root").click(function () {
        $("#tree").append(addRoot($(this).siblings('p').attr('elem_id')));
    });
    $('#tree').on('click', '.add', function () {
        $(this).closest('li').append(addRoot($(this).siblings('p').attr('elem_id')));
    });
    $('#tree').on('click', '.delete', function () {
        $(this).closest('li').remove();
    });
});

// Для добавления элемента создадим функцию, которой передадим id родителя
function addRoot(parent_id) {
    parent_id = parent_id ? parent_id : 0;
    let text = "Root";
    let root = "<ul class='ul' style='list-style-type: none;'>" +
        "<li><p id='root' elem_id='"+(++lastId)+"' parent_id='"+parent_id+"' class='mb-0 pl-3'>"+text+"</p><button class='delete btn btn-danger'>-</button> <button class='add btn btn-success'>+</button > " +
        "</li></ul>";

    // здесь вы можете дописать отправку данных на сервер.
    console.log('id: ' + lastId);
    console.log('parent_id: ' + parent_id);
    console.log('text: ' + text);

    return root;
}

Для удаления просто пройтись по всей ветке до конца, собрать ид элементов и сделать запрос к бд на удаление.

Если у Вас в таблице бд поле id - автоинкрементное, тогда вместо ручного расчета lastId, как в этом примере, вставлять запись, получать ее id и подставлять в элемент.

БЛОГ НА HUSL

Добавление данных об узлах дерева в базу данных

Ответы (1 шт):