Павел Левкович
*авторизированный доступ


Применение XMLDOM для реализации дерева структуры [18/08/04]
настроение: веселое


Мы настолько привыкли к представлению данных в виде дерева, что уже сложно представить, что есть другие решения для представления структуры каталогов и структуры сайта. Древовидная структура является наиболее понятной и простой при представлении структуры сайта.

Допустим у нас есть скрипт, который отдает всю структуру сайта в виде 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 деревом структуры. Можно добавить к каждому узлу возможные действия над страницей (свойства, контент), возможность перемещать узлы без перезагрузки документа, копировать и удалять узлы. Но все это как-нибудь потом…


Создать закладку Google slashdot YahooMyWeb Digg Technorati Delicious Забобрить эту статью! Добавьте на news2.ru




Павел Левкович

ФИО: Павел Левкович
Должность: программист
Ник: linur

Личные данные  Письмо автору

Yandex RSS



количество читателей онлайн и всего
BLOGUS.RU
Рейтинг блогов

Вверх
Вернуться

Поиск
© Red Graphic Systems