Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Июнь 2012   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

Внимание! Акция! С 7 июня по 7 июля 2012 года действует специальное предложение: вы подписываетесь или продлеваете подписку  на платный раздел сайта www.easyprog.ru и получаете бесплатно 5 первых лекций курса "Мастер класс Программирование в среде 1С:Бухглатерия 8.2. Основной курс", включая консультацию и индивидуальные задания по этим лекциям!

Участие в акции означает согласие с условиями публичной оферты.

В платном разделе

В бесплатном разделе

 

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «Java Script(JS): Библиотека визуальных компонентов. Класс CXBrTreeView.  Визуальное дерево. Продолжение.

 

 

Скачать файлы с описанными классами можно  здесь(версия 1.5).

Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS").

 

 

В выпуске 77 мы рассмотрели пример отображения раскрывающегося дерева с применением CXBrTreeView. Сегодня мы более подробно изучим функционал этого класса и заглянем внутрь него. И так, порядок работы с этим классом следующий:

Шаг 1. Определяем дочерний класс с предопределенным методом _on_node_click. В выпуске 77 это сделано так:

            function CXMyBrTreeView(object) {

                CXBrTreeView.call(this,object);

                this._on_node_click=CXMyBrTreeView_on_node_click;

            }

               

            function CXMyBrTreeView_on_node_click(id,level_node) {

                a=document.getElementById("2")

                a.innerHTML="Вы выбрали пункт "+id+" уровень "+level_node;

                alert(id+"   "+level_node)

            }

 

Шаг 2. Задать картинки узлов дерева:

Поле Назначение
_blank_image Имя файла картинки пустого пространства
_plus_image Имя файла картинки свернутого узла (плюсик)
_minus_image Имя файла картинки развернутого узла (минус)

 

Шаг 3. Через свойство _nodes добавить к объекту узлы дерева. Само свойство _nodes представляет собой класс CХBrTreeNodes. Добавлять туда новый объект можно методом _add:

            ob._nodes._add(new CХBrTreeNodes(null,"Проба",arr),"Главное",arr1)

            ob._nodes._add(new CХBrTreeNodes(null,"Проба1",arr),"Второй пункт",arr)

            ob._nodes._add(null,"Третий пункт",arr)

 

Первый аргумент - подчиненная ветвь дерева, второй - название, узла, которое отобразиться на экране, третий аргумент - ассоциативный массив имен файлов картинок. Для каждого узла можно задать свои картинки узла:

Тема сегодняшнего выпуска: «Java Script(JS): Библиотека визуальных компонентов. Класс CXBrTreeView. Визуальное дерево. Продолжение.

Если ветвь конечная, то в качестве подчиненной ветви ставим null.

У массива названий файлов следующая структура:

Поле Назначение
_open_image картинка развернутого узла
_close_image картинка свернутого узла
_end_image картинка конечного узла (не имеющего подчиненной ветки)
_is_exploded узел сразу отображается развернутым, если true, иначе свернутым

 

можно обращаться непосредственно к подчиненному дереву узла через свойство _objects_list:

            ob._nodes._objects_list[0]._nodes._add(null,"Подпункт",arr)

            ob._nodes._objects_list[0]._nodes._add(null,"Еще подпункт",arr)

            ob._nodes._objects_list[1]._nodes._add(null,"123",arr)

            ob._nodes._objects_list[1]._nodes._add(null,"456",arr2)

 

Шаг 4. Отображаем дерево:

...

            ob._nodes._objects_list[0]._nodes._objects_list[2]._nodes._add(new CХBrTreeNodes(null,"+++",arr),"Очень низкое подменю",arr)

            ob._nodes._objects_list[0]._nodes._objects_list[2]._nodes._objects_list[2]._nodes._add(null,"Ну вот и все",arr)

 

            ob._draw()

 

Теперь залезем во внутрь CXBrTreeView. Для программиста может представлять интерес метод _out_node - выводит узел. Вот его исходный текст:

function CXBrTreeView_out_node(level_node,node) {

    var Outline = _pad(level_node*4);

    if(node._nodes==null) {

        Outline+=this._get_image_name(this._blank_image,null,null);

        Outline+=this._get_image_name(node._data._get_as_string("_end_image"),null,null);

    } else {

        if(node._data._get_as_bool("_is_exploded")) {

            Outline+=this._get_image_name(this._minus_image,node._id,level_node);

               Outline+=this._get_image_name(node._data._get_as_string("_open_image"),null,null);

        } else {

            Outline+=this._get_image_name(this._plus_image,node._id,level_node);

               Outline+=this._get_image_name(node._data._get_as_string("_close_image"),null,null);

        }

    }

    Outline += "<A HREF='javascript:_global_container._";

    Outline += this._id+"._on_node_click("+node._id+","+level_node+")' class='";

    Outline += this._class_prefix;

    Outline += this._get_class_style(level_node,node);

    Outline += "'>"+node._name_node+"</A>";

    if((node._data._get_as_bool("_is_exploded"))&&(node._nodes!=null)) {

        Outline += this._out_tree(level_node+1,node._nodes);

    }

    return Outline;

}

 

Данный метод сначала формирует картинку узла, в зависимости от того, свернут узел или развернут и есть ли у него подчиненное дерево:

    if(node._nodes==null) {

        Outline+=this._get_image_name(this._blank_image,null,null);

        Outline+=this._get_image_name(node._data._get_as_string("_end_image"),null,null);

    } else {

        if(node._data._get_as_bool("_is_exploded")) {

            Outline+=this._get_image_name(this._minus_image,node._id,level_node);

               Outline+=this._get_image_name(node._data._get_as_string("_open_image"),null,null);

        } else {

            Outline+=this._get_image_name(this._plus_image,node._id,level_node);

               Outline+=this._get_image_name(node._data._get_as_string("_close_image"),null,null);

        }

    }

 

Затем идет формирование надписи узла:

    Outline += "<A HREF='javascript:_global_container._";

    Outline += this._id+"._on_node_click("+node._id+","+level_node+")' class='";

    Outline += this._class_prefix;

    Outline += this._get_class_style(level_node,node);

    Outline += "'>"+node._name_node+"</A>";

 

А вот тут то, как раз и начинается самое интересное. Допустим, вы не хотите, что бы при кликании на узел отрабатывалось какое то действие, а хотите сделать просто переход по ссылке, например, для того, что бы ваше дерево было проиндексировано поисковыми роботами.  В этом случае в тексте:

    Outline += "<A HREF='javascript:_global_container._";

    Outline += this._id+"._on_node_click("+node._id+","+level_node+")' class='";

 

нужно организовать свое формирование ссылки, отрабатываемой при кликании. В данном случае у нас имеет место ссылка на определенную функцию из скрипта, но вы можете поставить, например, нужный URL:

    Outline += "<A HREF='http://www.mysupersite.ru/viewcontent.php?treeid=";

    Outline += this._id+"&nodeid="+node._id+"&levelnode="+level_node+"' class='";

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 
В избранное