"Дерево" - очень удобная форма организации данных. В виде дерева естественным образом отображается любая иерархическая структура: папки и файлы, структура сайта, меню, пользователи и группы. Кроме наглядного отображения структуры есть возможность настроить отображение дерева, свернув или развернув некоторые (или все) ветви. При этом пространство странницы используется оптимально.
Реализация дерева "с нуля" достаточна сложна. Но нам повезло - мы решили использовать JavaScript библиотеку mootools, к которой добрые люди написали плагин MooTree 2.
Если хотите, можете начать изучение с чтения документации. Хотя, не менее продуктивный, но более интересный метод - разбор готовых примеров. А к документации можно обратиться при возникновении трудностей (тем более, что руки до нее пока не дошлии она пока не переведена с тарабарского).
Отмечу только три важных момента:
- не забывайте включать в заголовок файла между <head> и </head> подключение mootools и mooTree2, а также файл стилей
<script type="text/javascript" src="js/mootools.js"> <script type="text/javascript" src="js/mootree.js"> <link rel="stylesheet" href="inc/css/mootree.css" type="text/css" media="screen" />- иконки имеют размер 18х18 пикселов, наборы иконок составлены в полоски ("темы"). При работе скрипт составляет из полоски массив иконок и использует их. Пользователь может нарисовать свой набор иконок или отдельную иконку и присвоить ее какому-либо узлу дерева. Использование нестандартных иконок показано в первом примере, нестандартных тем - во втором
<div id="mytree">
Поскольку нас интересует прежде всего автоматизация создания дерева, то сразу отмечу, что плагин поддерживает по крайней мере 3 способа генерации дерева
(не считая модификации в реальном времени):
- создание каждого элемента посредством JavaScript
- генерация дерева из списков
- генерация дерева из XML файлов
Последний вариант, пожалуй самый мощный - он позволяет подгружать структуру дерева последовательно, по мере открытия ветвей. Так
что, нет необходимости генерировать все огромное громоздкое дерево структуры сразу. Осталось только научится генерировать XML посредством
php, но для нас это задача несложная (я надеюсь :) ) - не забывайте только перекодировать кириллицу в UTF-8 на выходе и тестируйте
страницу на валидность структуры перед применением. Других подводных камней там вроде бы нет.
Чего в плагине не хватает? Пожалуй, только сортировки и редактирования.
Но эти задачи попробуем решить позже при помощи других плагинов.
Итак:
Этот пример демонстрирует основные функции MooTree, включая enable() и disable(), которые могут быть использованы для минимизации количества перерисовок.
Этот пример также показывает основной вариант использования метода get() и ИД узла - например, введите "2.2" в окно ввода внизу раздела и нажмите "найти узел"
Код:
var tree;
window.onload = function() {
// --- пример обычного дерева с темой по умолчанию:
tree = new MooTreeControl({
div: 'mytree',
mode: 'files',
grid: true
},{
text: 'Корневой узел',
open: true
});
tree.disable(); // остановка перерисовок на время создания дерева...
// создаем корневые узлы
var node1 = tree.insert({text:'Узел 1', id:'1'}); // стандартный узел
// узел со специфичными иконками. sample_icons.gif# - это вторая иконка в полоске sample_icons.gif
var node2 = tree.insert({text:'Узел 2', id:'2', icon:'sample_icons.gif#1', openicon:'sample_icons.gif#2'});
var node3 = tree.insert({text:'Узел 3', id:'3'});
// создаем подузлы
var node2_1 = node2.insert({text:'Узел 2.1', id:'2.1'});
var node2_2 = node2.insert({text:'Узел 2.2', id:'2.2', color:'#ff0000'}); // задаем нестандартный цвет текста
var node2_3 = node2.insert({text:'Узел e 2.3', id:'2.3'});
// создаем подузлы третьего уролвня
var node2_2_1 = node2_2.insert({text:'Узел 2.2.1', id:'2.2.1', color:'#00a000'});
var node2_2_1_1 = node2_2_1.insert({text:'Узел 2.2.1.1', id:'2.2.1.1', color:'#0000ff'});
var node4 = tree.insert({text:'Узел 4', id:'4', icon:'sample_icons.gif#3'});
tree.expand();
tree.enable(); // снова включаем перерисовку.
}
// функция поиска узла дерева
function find_node() {
var node = tree.get( $('nodeid_input').value );
window.alert( node ? 'found: ' + node.text : 'not found...' );
}