Полезные скрипты. Часть 5.

В этой части приведу пример реализации древовидного меню на JavaScript с помощью PHP.

В своей практике много раз сталкивался с тем, что такое меню нужно, но человек затрудняется соединить скрипт на PHP с меню скриптом на JavaScript.

Для примера возьмём бесплатный скрипт для отображения древовидного меню Tigra Tree Menu, который поддерживается: MS IE, Netscape на платформах Windows 95/98/ME/2000/XP и Mac OS 8/9/X по адресу http://www.softcomplex.com/products/tigra_tree_menu/

Скачав и распаковав архив, мы увидим 3 яваскриптовых файла:
tree.js (сам скрипт отображения и формирования меню), tree_tpl.js(настройки самого меню и картинок к нему), а также
tree_items.js (сама структура меню), который нам и нужно заменить на PHP скрипт, который возьмёт наши данные из базы.

Создайте таблицу в базе данных:
Код:
CREATE TABLE `menu` (
`id` int(11) NOT NULL auto_increment,
`pid` int(11) NOT NULL default '0',
`name` varchar(255) NOT NULL default '',
PRIMARY KEY (`id`)
);

id - идентификатор пункта меню;
pid - принадлежность к ветке меню (если, например, pid = 12, значит, этот пункт является подуровнем пункта, у которого id = 12);
name - название самого пункта меню.

Ну, и заполним немного данными для демонстрации:
Код:
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (1, 0, 'qwwwq');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (2, 0, 'qwwwq 2');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (11, 8, 'test');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (3, 0, 'qwwwq 3');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (12, 11, 'test 2');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (7, 1, 'eewew 1');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (8, 1, 'eewew 2');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (9, 1, 'eewew 3');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (13, 9, 'test3');

Далее соединимся с базой данных и напишем рекурсивную функцию для формирования такой структуры, как в файле tree_items.js.

Пишем саму функцию:
Код:
function get_tree($parent_id = 0) {
global $out;
$query = "SELECT * FROM menu WHERE pid = '$parent_id'"; //начинаем с нулевого уровня
$result = mysql_query($query);
while ($row = mysql_fetch_array($result)) {
$out .= "['{$row['name']}','data.php?id={$row['id']}&pid={$row['pid']}',\n";
get_tree($row['id']); //идём дальше "внутрь" если есть у данного id подуровни
$out .= "],";
}
return $out; //возвращаем сформированую структуру. Не хватает только начальной строки и конечной
}

//Соединяемся с базой данных
$link = mysql_connect("hostname", "user", "password") or die(mysql_error());
mysql_select_db("dbname", $link) or die(mysql_error());

//Начинаем с начальной строки
$tree_items = "[ ['HOME', 'index.php',";
//Вызываем функцию для построения меню
$tree_items .= get_tree();
//Заканчиваем структуру конечной строкой
$tree_items .= "] ];"; //Всё, структура для меню получена

Теперь в нужном нам месте выводим сформированное меню:
Код:
print '< script language="JavaScript"
var TREE_ITEMS = '.$tree_items.'; //оздаём массив и подставляем в него сформированные ранее данные
new tree (TREE_ITEMS, tree_tpl); //вызываем функцию яваскрипт, которая разберёт нашу структуру и отрисует наше меню
< /script >';
P.S. Для того, чтобы меню работало, не забудьте на странице, сразу после тега < body >, вставить нужные скрипты "Tigra Tree Menu":
Код:
< script language="JavaScript" src="путь_к_каталогу_с_скриптами/tree.js" >< /script >
< script language="JavaScript" src="путь_к_каталогу_с_скриптами/tree_tpl.js" >< /script >

Ну вот и всё. Надеюсь, что кому-нибудь это пригодится.

Мороз