Добавление и удаление данных об узлах, простого дерева с записью в БД. CDUD

Question

На стороне клиента имеется функционал построения простого дерева. Изначально имеется одна кнопка Create root при нажатии на которую появляется корень дерева. у корня есть имя root и две кнопки добавить и удалить узел(+,-), у последующих новых узлов имеются аналогичные кнопки. При добавлении узла, новый узел появляется справа ниже, при удалении узла удаляется он с его дочерними элементами. Все эти изменения так же должны фиксироваться в базе данных. Ломая голову это решения решил для себя, что нужно использовать CRUD и реализовать его на jQuery и передавать данные об узлах с помощью ajax в файлы php с классами где каждый отвечает за свой функционал. На выходе вышло так

index.php

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

script.js

let lastId = 0;     // последний созданный id
$(document).ready(function () {
 $("#create-root").click(function () {
    $("#tree").append(createRoot($(this).siblings('p').attr('elem_id')));
 });
$('#tree').on('click', '.add', function () {
    $(this).closest('li').append(createRoot($(this).siblings('p').attr('elem_id')));
});
$('#tree').on('click', '.delete', function () {
    $(this).closest('li').remove();
});
});

function createRoot(parent_id) {
 // метод для добавления элемента. Принимает id родителя
 parent_id = parent_id ? parent_id : 0;
 let text = "Root";
 let root = "<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>";
 // отправка данных на сервер.
 $.ajax({
    url: 'app/create.php',
    type: 'POST',
    data: ({create: 'create', id: lastId, parent_id: parent_id, text: text}),
    dataType: 'text',
    // success: function show(data) {
    // }
});
return root;
}
function show(data) {
 $('#tree').find('#root').each(function (index, elem) {
    alert(elem);
});
}
function edit(id) {
 // метод для редактирования данных
}
function deleteRoot(id, parent_id) {
 // метод для удаления корня
 // отправка данных на сервер.
 $.ajax({
    url: 'app/delete.php',
    type: 'POST',
    data: ({method: 'delete', id: lastId, parent_id: parent_id}),
    dataType: 'text',
    // success: show(data)
});
}

В данном случае узел с начало отрисовывается, а после идет запись в базу данных

create.php

class Create {

public function createRecord($id, $parent_id, $text, $link){
    $query = "INSERT INTO tree_table(id, parent_id, text) VALUES ({$id}, {$parent_id}, 
'{$text}')";
    mysqli_query($link, $query) or die(mysqli_error($link));
}
}

В которой выстраивается простое дерево по типу

id | parent_id | text
1 | 0 | root и т.д.
Но как я понимаю с начало нужно отправить данные в базу данных, а после получить ответ с базы данных класса show show.php и после вывести их на экран и удаление по тому же принципу. Так вот как реализовать подобный функционал или может моя мысль не совсем верна?

БЛОГ НА HUSL

Добавление и удаление данных об узлах, простого дерева с записью в БД. CDUD

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