Праздник Игоря

Я начинаю серию статей, в которых последовательно опишу процесс создания фотогалереи. Эту галерею я написал для одного из проектов.

Задача

Разработать галерею с неограниченной вложенностью в категориях. Категории должны поддерживать локализацию (русский и английский языки). Должна быть панель администратора. Все что можно, реализовать с помощью Аякс.

Начало разработки

В самом начале я получил, штмл верстку галереи. Не идеально, но концепция понятна. За прототип дерева было взято цсс дерево из техногрета Артемия Лебедева. . Недостатоки того дерева: поддерживает только один уровень вложенности, в ИЕ плохо выглядит. Уже вырисовывается первая задача.

Создание дерева

Я подумываю об использовании дерева из библиотеки ext.js. Но решаю не внедрять библиотеку в этот проект. В проекте использую только prototype.js library.

Задача: Создать дерево с неограниченной вложенностью. Должно позволять добавлять, удалять и редактировать узлы.

Задача ясна. Первое что решаю сделать, добавить в дерево поддержку ИЕ и научить неограниченной вложенности. Делаю это, используя просто штмл и цсс. До динамики еще время дойдет. В итоге получаю такой вид дерева. Из рисунка видно что начальный вариант несколько изменился. Штмл такого вида: <ul class="ul_maincategory"> <li class=""> <div> <p> <a class="sc" href="javascript:expand_or_collapse();"><span class="expanded_node" /> </a><a class="title" title="ARATA" href="javascript:open_item();">ARATA</a></p> </div> <ul class="ul_subcategory"> <li class=""> <div> <p style="left: 1.89em;"> <a class="sc" href="javascript:expand_or_collapse();"><span class="expanded_node" /> </a><a class="title" title="Подкатегория1" href="javascript:open_item();">Подкатегория1</a></p> </div> <ul class="ul_subcategory" style="border-left: 2px solid white; margin-left: -1px;"> <li class=""> <div> <p style="left: 1.89em;"> <a class="sc" href="javascript:expand_or_collapse();"><span class="expanded_node" /> </a><a class="title" title="Подкатегория1" href="javascript:open_item();">Подкатегория1</a></p> </div> <ul class="ul_subcategory" style="border-left: 2px solid white; margin-left: -1px;"> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" title="Подкатегория1" href="javascript:open_item();">Подкатегория1</a></p> </div> </li> </ul> </li> </ul> </li></p> </ul> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="CATALANO">CATALANO</a></p> </div> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="MONILE">MONILE</a></p> </div> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="LENVAL">LENVAL</a></p> </div> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="ROBERTO GIANNOTTI">ROBERTO GIANNOTTI</a></p> </div> </li> </ul>

Вырисовывается задача с помощью джаваскрипта создать тоже самое.

На вход нужно давать данные. Выбор формата очевиден.

JSON, лучше в JS нет!

Ручками создаем данные. С помощью этих данных будет отображено дерево категорий.

var data={nodes:[{name:'ARATA',hint:'ARATA',url:'ARATA',expanded:false,languages:[{language:'Русский',name:'ARATA',hint:'ARATA'},{language:'English',name:'ARATA',hint:'ARATA'}],categoryId:58,childNodes:[{name:Кольца,hint:Кольца,url:'arata/rings',expanded:false,languages:[{language:'Русский',name:Кольца,hint:Кольца},{language:'English',name:'Rings',hint:'Rings'}],categoryId:64}]},{name:'CATALANO',hint:'CATALANO',url:'CATALANO',expanded:false,languages:[{language:'Русский',name:'CATALANO',hint:'CATALANO'},{language:'English',name:'CATALANO',hint:'CATALANO'}],categoryId:59},{name:'MONILE',hint:'MONILE',url:'MONILE',expanded:false,languages:[{language:'Русский',name:'MONILE',hint:'MONILE'},{language:'English',name:'MONILE',hint:'MONILE'}],categoryId:60},{name:'LENVAL',hint:'LENVAL',url:'LENVAL',expanded:false,languages:[{language:'Русский',name:'LENVAL',hint:'LENVAL'},{language:'English',name:'LENVAL',hint:'LENVAL'}],categoryId:62},{name:'ROBERTO GIANNOTTI',hint:'ROBERTO GIANNOTTI',url:'ROBERTO GIANNOTTI',expanded:false,languages:[{language:'Русский',name:'ROBERTO GIANNOTTI',hint:'ROBERTO GIANNOTTI'},{language:'English',name:'ROBERTO GIANNOTTI',hint:'ROBERTO GIANNOTTI'}],categoryId:63}]};

Итак, можно заняться наконец рендерингом дерева.

Рендеринг дерева

В объектной структуре особо нечего выдумывать, классы те же что и везде (класс дерева и класс узла):

Tree – содержит в себе ноды, рисует дерево итд.

TreeNode – реализация логики узла.

var Tree = Class.create(); Tree.prototype = { initialize:function(container,dataSource) { this.el = $(container); this.data= dataSource; this.el.className = "tree"; this.childNodes =new Array(); this.el.onclick = this.deselectAll.bindAsEventListener(this); this.render(); this.selectedNode = this; }, render:function() { this.nodesEl =createElement("ul","",this.el,"ul_maincategory"); this.createChilds(); this.renderChilds(); this.updateConnectors(); }, createChilds:function() { for(var i=0;i<this.data.nodes.length;i++) { this.appendNode(new TreeNode(this.data.nodes[i],this,this)); } }, renderChilds:function() { for(var i=0;i<this.childNodes.length;i++) { this.childNodes[i].render(); } }, appendNode:function(child) { this.childNodes.push(child); }, appendNodeToSelected:function(config) { var selectedNode = this.selectedNode?this.selectedNode:this; node = new TreeNode(config, this,selectedNode); if(selectedNode){ selectedNode.appendNode(node); selectedNode.updateNodesEl(); } else {this.appendNode(node);} node.render(); this.updateConnectors(); return node; }, updateNodesEl:function() {}, setSelectedNode:function(node) { if(this.selectedNode&&this.selectedNode!=this) this.selectedNode.deselectNode(); this.selectedNode = node; if(this.onSelect) this.onSelect(node); }, selectFirstNode:function() { this.childNodes[0].onClickHandler(); }, deselectAll:function() { this.setSelectedNode(this); }, deleteSelectedNode:function() { if(!this.selectedNode) return; this.selectedNode.deleteNode(); this.updateConnectors(); }, updateConnectors:function() { //update recursively childs for(var i=0;i<this.childNodes.length;i++) { this.childNodes[i].updateConnectors(); } } }

Из полезного, метод удаления выбраного нода (deleteSelectedNode), добавление нода (appendNode), добавление нода в дети текущего узла (appendNodeToSelected).

Код нода не показываю тут, так как его много. В ноде реализованы методы редактирующие его отображение и данные.

setTitle:function(title) { this.titleEl.innerHTML = title; this.data.name = title; this.title = title; }, setHint:function(hint) { this.titleEl.title = hint; this.data.hint = hint; this.hint = hint; }, setUrl:function(url) { this.data.url = url; }, А также код удаления: deleteNode:function() { this.parentNode.childNodes=deleteElementFromArray(this.parentNode.childNodes,this.getIndex()); destroyElement(this.el); this.el = null; if(this.parentNode.childNodes.length==0) {destroyElement(this.parentNode.nodesEl); this.parentNode.nodesEl=null;}; if(this.parentNode!=this.tree) this.parentNode.updateNodesEl(); this.tree.selectedNode = null; },

В завершении

Задача выполнена, дерево отображается в ИЕ и ФФ; позволяет добавлять удалять и редактировать ноды; содержит удобное АПИ для работы.

Пример посмотреть можно здесь.

Скачать пример здесь.

В следующей части я напишу серверную часть, которая будет отображать дерево.

English verison of article