Я создал древовидное представление с плагином дерева jQuery JSTree, PHP и MySQL с контекстным меню для создания, переименования и удаления узлов.Все узлы древовидной структуры зависят от обработки на стороне сервера.
Это структура таблицы в моей базе данных:
CREATE TABLE IF NOT EXISTS `treeview_items` (
`id` int(11) NOT NULL,
`name` varchar(200) NOT NULL,
`text` varchar(200) NOT NULL,
`parent_id` varchar(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;
Это метод JsTree в моем index.html (внутри контейнера div).)
$(document).ready(function() {
$('#tree-container').jstree({
'plugins' : ['dnd', 'state', 'contextmenu', 'json_data' , 'types', 'wholerow', 'theme', 'search', 'sort', 'changed', 'search'],
'core' : {
'data' : {
'url' : 'response.php?operation=get_node',
'data' : function (node) {
return { 'id' : node.id };
},
"dataType" : "json"
},
'check_callback' : true,
'themes' : {
'responsive' : false
}
},
'types': {
"child": {
"icon": "glyphicon glyphicon-leaf"
},
"root": {
"icon": "glyphicon glyphicon-folder-close"
},
"default": {
"icon": "glyphicon glyphicon-folder-close"
}
} // , 'contextmenu': {items: context_menu}
}).on('create_node.jstree', function (e, data) {
$.get('response.php?operation=create_node', {'id' : data.node.parent, 'text' : data.node.text})
.done(function (d) {
data.instance.set_id(data.node, d.id);
})
.fail(function () {
data.instance.refresh();
});
}).on('move_node.jstree', function (e, data) {
$.get('response.php?operation=move_node', {'id' : data.node.id, 'new_parent_id' : data.node.parent})
.done(function (d) {
// ...
// alert(data.node.parent);
data.instance.refresh();
})
.fail(function () {
data.instance.refresh();
});
}).on('rename_node.jstree', function (e, data) {
$.get('response.php?operation=rename_node', {'id' : data.node.id, 'text' : data.node.text})
.done(function (d) {
// ...
data.instance.refresh();
})
.fail(function () {
data.instance.refresh();
});
}).on('delete_node.jstree', function (e, data) {
$.get('response.php?operation=delete_node', {'id' : data.node.id})
.done(function (d) {
// ...
data.instance.refresh();
})
.fail(function () {
data.instance.refresh();
});
})
});
и это файл response.php для обновления информации об узлах в базе данных mysql
<?php
// THIS IS AN EXAMPLE DATABASE CONNECTION
$servername = "localhost";
$database = "myDatabase";
$username = "root";
$password = "password";
try {
$db = new PDO("mysql:host=$servername;dbname=$database", $username, $password);
// set the PDO error mode to exception
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
/* echo "Connected successfully"; */
} catch(PDOException $e) {
/* echo "Connection failed: " . $e->getMessage() . "\n"; */
header('Location: /public/error_page');
exit;
}
$table_name = "`treeview_items`";
// CREATE, RENAME, DELETE NODE
if(isset($_GET['operation'])) {
try {
$result = null;
switch($_GET['operation']) {
case 'get_node':
$node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : 0;
$sql = "SELECT * FROM " . $table_name;
$res = $db->prepare($sql);
$res->execute();
// Iterate on results row and create new index array of data
while($row = $res->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row;
}
$itemsByReference = array();
// Build array of item references:
foreach($data as $key => &$item) {
$itemsByReference[$item['id']] = &$item;
// Children array:
$itemsByReference[$item['id']]['children'] = array();
// Empty data class (so that json_encode adds "data: {}" )
$itemsByReference[$item['id']]['data'] = new StdClass();
}
// Set items as children of the relevant parent item.
foreach($data as $key => &$item) {
if($item['parent_id'] && isset($itemsByReference[$item['parent_id']])) {
$itemsByReference [$item['parent_id']]['children'][] = &$item;
}
}
// Remove items that were added to parents elsewhere:
foreach($data as $key => &$item) {
if($item['parent_id'] && isset($itemsByReference[$item['parent_id']])) {
unset($data[$key]);
}
}
$result = $data;
break;
case 'create_node':
$node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : -1;
if($node == -1) break;
$node_text = isset($_GET['text']) && $_GET['text'] !== '' ? $_GET['text'] : '';
$sql = "INSERT INTO " . $table_name . " (`name`, `text`, `parent_id`) VALUES('" . $node_text . "', '" . $node_text . "', '" . $node . "')";
$res = $db->prepare($sql);
$res->execute();
$result = array('id' => $db->lastInsertId());
break;
case 'move_node':
$node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : -1;
$node_new_parent = isset($_GET['new_parent_id']) && $_GET['new_parent_id'] !== '#' ? (int)$_GET['new_parent_id'] : -1;
if($node == -1 || $node_new_parent == -1) break;
$sql ="UPDATE " . $table_name . " SET `parent_id` = '" . $node_new_parent . "' WHERE `id` = '" . $node . "'";
$res = $db->prepare($sql);
$res->execute();
break;
case 'rename_node':
$node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : 0;
$node_text = isset($_GET['text']) && $_GET['text'] !== '' ? $_GET['text'] : '';
$sql = "UPDATE " . $table_name . " SET `name`='" . $node_text . "',`text`='" . $node_text . "' WHERE `id`= '" . $node . "'";
$res = $db->prepare($sql);
$res->execute();
break;
case 'delete_node':
$node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : 0;
$sql ="DELETE FROM " . $table_name . " WHERE `id`= '" . $node ."'";
$res = $db->prepare($sql);
$res->execute();
break;
default:
throw new Exception('Unsupported operation: ' . $_GET['operation']);
break;
}
header('Content-Type: application/json; charset=utf-8');
echo json_encode($result);
} catch (Exception $e) {
header($_SERVER["SERVER_PROTOCOL"] . ' 500 Server Error');
header('Status: 500 Server Error');
echo $e->getMessage();
}
die();
}
?>
Например, я создал эту древовидную структуру:
img1.png
и это древовидная структура на phpMyAdmin:
img2.png
Создание и переименование работает нормальноно у меня есть проблема, если я удаляю узлы
Когда я выбираю узел, чтобы удалить его, мой код удаляет только выбранный узел, а не дочерние.Например, если я удаляю узел «Папка 5», мой код удаляет только узел «Папка 5», а не «Папка 6», и когда я обновляю древовидную структуру, очевидно, что я не получаю правильное древовидное представление, потому что узел «Папка 6» имеет «parent_id»"= 18, которого больше нет.
Как я могу это исправить?Я бы удалил выбранный узел и все дочерние элементы.
Спасибо!извините за мой плохой английский