Мы настолько привыкли к представлению данных в виде дерева, что уже сложно представить, что есть другие решения для представления структуры каталогов и структуры сайта. Древовидная структура является наиболее понятной и простой при представлении структуры сайта.
Допустим у нас есть скрипт, который отдает всю структуру сайта в виде xml документа, и теперь стоят следующие проблемы:
- как использовать этот документ для представления структуры в виде дерева;
- как обеспечить быстрый доступ к нужному документу в дереве;
- в каком виде лучше представить это дерево;
Пойдем по порядку.
Мы знаем, что документ лежит по адресу: http://mydomen.com/tree.xml.
Для загрузки парсинга xml документов в IE есть ряд функций:
Создаем новый XMLDOM объект, выполняем загрузку документа, и получаем в памяти xml-дерево.
Фрагмент кода, выполняющий загрузку и создание объекта xml дерева:
xmlfilepath = "http://mydomen.com/tree.xml";
docobj = new ActiveXObject("Msxml2.DOMDocument");
docobj.async = false;
docobj.resolveExternals = false;
docobj.load(xmlfilepath)
if (docobj.parseError.errorCode != 0) reportParseError(docobj.parseError); // передает в пользовательскую функцию информацию о ошибке
IE представляет достаточный функционал для обработки этого дерева:обход ветвей дерева, получение содержание узла, получение свойств узла, перемещение узлов, копирование узлов, создание узлов и т.д.
Рекурсивная функция для отображения узла дерева:
function viewNode(curNode){
var childs = curNode.childNodes;
var childnodes = childs.length;
var visible = (curNode.nodeName!='treeitem')?true:(curNode.attributes.getNamedItem('state').text);
var curID = (curNode.nodeName=="treeitem")?curNode.attributes.getNamedItem('id').text:"";
if (curNode.nodeName=="treeitem"){
result_str+= showHTLMNode (curID, childs.item(0).text, visible);
if (curNode.nodeName=="treeitem" || curNode.nodeName=="tree")
if (visible=="visible" || curNode.nodeName=="tree")
for(var i=0;i<childnodes;i++)
if (childs.item(i).nodeName=="treeitem") {viewNode(childs.item(i))};
}
}
//где showHTLMNode() – функция формирующая HTML для каждого узла в соответствии с его id, названием и флагом скрытия/раскрытия.
В итоге у нас получается строка result_str, которая содержит наше дерево и мы можем теперь присвоить его любому контейнеру с помощью innerHTML.
Причем получился набор вложенных div, поэтому очень легко реализовать функционал скрытия/раскрытия узлов (достаточно тегу div изменить innerHTML)
Функция скрытия (раскрытия узла в структуре сайта):
function changeState(nodeid){
var curNode = docobj.nodeFromID(nodeid);
if(curNode.attributes.getNamedItem('state').text=='visible')
curNode.attributes.getNamedItem('state').text='hidden';
else
curNode.attributes.getNamedItem('state').text='visible';
result_str ="";
viewNode(curNode);
document.getElementById(nodeid).outerHTML=result_str;
}
Для более простого анализа данной реализации древовидной структуры приведу пример xml документа:
Формат xml файла:
Корень дерева – treeitem.
Свойства отсутствуют.
Родителей нет.
Потомки: treeitem.
Узел дерева – treeitem.
Свойства:
id - уникальный идентификатор узла;
state [visible/hidden] - статус состояния узла (свернут/развернут).
Родители: tree, treeitem.
Потомки: label,treeitem.
Метка узла (определяет название узла при отображении) - label
Свойства отсутствуют.
Родитель: treeitem.
Потомков нет.
Пример xml файла:
<?xml version="1.0" encoding="WINDOWS-1252" ?>
<tree>
<treeitem id="id_0" state="visible">
<label>Пример дерева структуры</label>
<treeitem id="id_2"state="visible">
<label>Подраздел 1</label>
<treeitem id="id_3" state="hidden">
<label>страница 1</label>
</treeitem>
<treeitem id="id_4" state="hidden">
<label>страница 2</label>
</treeitem>
<treeitem id="id_5" state="hidden">
<label>Страница 3</label>
</treeitem>
</treeitem>
<treeitem id="id_1" state="visible">
<label>Подраздел 2</label>
<treeitem id="id_6" state="visible">
<label>страница 1</label>
<treeitem id="id_8" state="hidden">
<label>страница 1.1</label>
</treeitem>
<treeitem id="id_7" state="hidden">
<label>страница 1.2</label>
</treeitem>
</treeitem>
</treeitem>
</treeitem>
</tree>
Тут представлен только общий механизм работы с xml деревом структуры. Можно добавить к каждому узлу возможные действия над страницей (свойства, контент), возможность перемещать узлы без перезагрузки документа, копировать и удалять узлы. Но все это как-нибудь потом…
