Построение DHTML-дерева с информацией из БД (PHP/MySQL)

Напишем скрипт, который формировал бы DHTML-дерево на стороне клиента на основе информации из таблицы БД.

Основным преимуществом построения дерева на клиенте является то, что мы один раз отдаем сформированный код, а затем без обращений к серверу работаем с построенным деревом.

За основу для построения DHTML-дерева возьмем отличный скрипт dtree с сайта www.destroydrop.com/.

Пример работы кода на java script www.destroydrop.com/javascripts/tree/example/

Иерархию разделов будем хранить в таблице базы данных MySQL.

Ниже на скриншоте показана данная таблица (catalogue):

id — первичный ключ таблицы

pid — id родительского раздела

Далее напишем следующий PHP-скрипт:
1. Файл dbopen.php (открывает соединение с MySQL)

<?php
$hostName = «localhost»;
$userName = «user»;
$password = «password»;
$databaseName = «tree»;
if (!($link=mysql_connect($hostName,$userName,$password))) {
printf(«Ошибка при соединении с MySQL !\n»);
exit();
}
if (!mysql_select_db($databaseName, $link)) {
printf(«Ошибка базы данных !»);
exit();
}
?>

2. Файл index.php (основной скрипт)


<?php

include( "dbopen.php" );

$sSQL = "SELECT id, title, pid FROM catalogue ORDER BY title";

$result = mysql_query($sSQL, $link);

?>

<html>

<head>

<link rel="stylesheet" href="css/dtree.css" type="text/css" />

<script type="text/javascript" src="js/dtree.js"></script>

</head>

<body>

<div class="dtree">

<p><a href="javascript: d.openAll();">раскрыть дерево</a> | 

<a href="javascript: d.closeAll();">свернуть дерево</a></p>

<script language="javascript" type="text/javascript">

<!--

var d = new dTree('d');

d.add(0, -1 , 'Корневой раздел');

<?php

while ( $row = mysql_fetch_array($result) ) {

?>

d.add(<?php echo($row["id"]);?>, <?php echo($row["pid"]);?>, '<?php echo($row["title"]);?>','#');

<?php

}

?>

document.write(d);

//-->

</script>

</div>

</body>

</html>

<?php

mysql_close($link);

?>

Ниже на скриншоте показан пример работы index.php:

Пример проекта прилагается: phpdtree.zip

Автор скрипта Христофоров Юрий

Комментарии: 5

Сергей 02.02.2011 в 02:17
Спасибо! за подробное объяснение! А то выводил дерево на стороне сервера, через рекурсию, 3500 строк, сервер отказывается!
Ответить
Вадим 29.06.2011 в 17:58
если выводить по 500 строк на страницу, то всё работает как надо
Ответить
Иван 24.05.2012 в 10:39
А реализация на JQuery есть?
Ответить
1. FORTRESS-DESIGN (автор) 25.05.2012 в 18:07
  На jQuery не встречал.
  Ответить
Роман 05.09.2013 в 16:09
Спасибо, очень полезный скрипт.
Ответить

Добавить комментарий