Грамотное javascript-дерево за 7 шагов

В этой статье описана DOM/CSS-структура дерева, которую я в свое время разработал для dojo toolkit.

Основные особенности:

• Семантическая удобная CSS-разметка.
  Внешний вид дерева определяется исключительно CSS.
• Скрытие/раскрытие узлов
• Структура дерева обозначена линиями
• Допускает многострочное HTML-содержимое в узлах
• Оптимизация по количеству HTML-тагов
• Легко дополняется новыми фишками

Например:

Шаг 1. DOM-модель одного узла дерева.

Основной строительный блок дерева - его узел.

Каждый узел имеет класс Node и состоит из иконки Expand, заголовка Content и контейнера для детей Container.

Визуальное представление узла:

Например, вот так выглядит разметка просто корневого узла Root, без детей:

<ul class="Container">
  <li class="Node IsRoot ExpandOpen">
    <div class="Expand"></div>
    <div class="Content">Root</div>
  </li>
</ul>

Класс IsRoot

говорит о том, что узел является корнем дерева

Класс ExpandOpen

Обозначает, что узел раскрыт

Шаг 2. Два узла дерева.

А вот - внутри узла появился Container с (пока) одним потомком Item 1.

<ul class="Container">
  <li class="Node IsRoot ExpandOpen">
    <div class="Expand"></div>
    <div class="Content">Root</div>
    <ul class="Container">
      <li class="Node ExpandLeaf">
        <div class="Expand"></div>
        <div class="Content">Item 1</div>
      </li>
    </ul>
  </li>
</ul>

Семантические элементы:

Контейнер Container

В контейнере содержатся все дети, т.е 1 или больше Node. Это удобно, ведь чтобы скрыть/показать потомков - достаточно обратиться к контейнеру.

Перебрать всех детей можно, используя Container.childNodes.

Класс ExpandLeaf

Обозначает, что узел является листом дерева.

Узел-потомок уже не имеет класса IsRoot.

Шаг 3. CSS для показа дерева

Для начала - немного почистим стили для UL и LI: обнулим по умолчанию заданные значения margin, padding и list-style-type.

/* контейнер просто содержит узлы.
 Узел сам будет отвечать за свой отступ */
.Container {
        padding: 0;
        margin: 0;
}

.Container li {
        list-style-type: none; /* убрать кружочки/точечки */
}

Стили узла

Самым базовым является стиль для собственно узла Node.
Он задает иерархическую структуру за счет свойства margin-left, которое отодвигает узел-потомок от левой стенки контейнера.

/* узел отодвинут от левой стенки контейнера на 18px
    благодаря этим отступам вложенные узлы формируют иерархию
 */
.Node {
    margin-left: 18px;
    zoom: 1; /* спецсвойство против багов IE6,7. Ставит hasLayout */
}

/* Корневой узел от родительского контейнера не отодвинут. 
   Ему же не надо демонстрировать отступом, чей он сын.
   Это правило идет после .Node, поэтому имеет более высокий приоритет 
   Так что class="Node IsRoot" дает margin-left:0
*/ 
.IsRoot {
    margin-left: 0;
}

Стили компонентов узла

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

Левая колонка с фиксированной шириной - Expand, правая колонка - Content.

/* иконка скрытого/раскрытого поддерева или листа
    сами иконки идут дальше, здесь общие свойства
 */
.Expand {
    width: 18px;
    height: 18px;
    /* принцип двухколоночной верстки. */
    /* float:left и width дива Expand + margin-left дива Content */
    float: left; 
}

/* содержание (заголовок) узла */
 .Content {
    /* чтобы не налезать на Expand */
    margin-left:18px;
    /* высота заголовка - как минимум равна Expand 
        Т.е правая колонка всегда выше или равна левой.
        Иначе нижний float будет пытаться разместиться на получившейся ступеньке
    */    
    min-height: 18px; 
}

 /* все правила после * html выполняет только IE6 */
* html .Content {
    height: 18px; /* аналог min-height для IE6 */
}

Получившаяся структура допускает любые данные внутри Content, включая многострочные и т.п.

Иконки состояния узла

/* открытое поддерево */
.ExpandOpen .Expand {  
    background-image: url(/forum/img/minus.gif);  
}

/* закрытое поддерево */
.ExpandClosed .Expand {
    background-image: url(/forum/img/plus.gif);
}

/* лист */
.ExpandLeaf .Expand {
    background-image: url(/forum/img/leaf.gif);
}

Здесь очень важен порядок, в котором следуют определения.

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

<li class="...Node ExpandOpen...">
  ...
  <li class="...Node ExpandClosed...">
     <div class="Expand"></div> 
     ..
  </li>
</li>

Внутренний див Expand подходит под оба CSS-правила: и под ExpandOpen .Expand и под .ExpandClosed .Expand.

Правило .ExpandClosed .Expand идет позже, поэтому имеет более высокий приоритет, и будет (правильно) показана иконка закрытого раздела.

Шаг 4. Добавляем структурные линии.

Структурные линии обрисовывают дерево, делая иерархию более наглядной.

В некоторых javascript-деревьях они пунктирные и используют кучу лишних тагов из-за неудачно выбранной DOM/CSS-модели.

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

И все это без добавления дополнительных тагов, исключительно средствами CSS.

Наша цель - получить дерево, которое выглядит так:

<div>Info</div>
<ul class="Container">
  <li class="Node IsRoot IsLast ExpandOpen">
    <div class="Expand"></div>
    <div class="Content">Root</div>
    <ul class="Container">
      <li class="Node ExpandOpen">
        <div class="Expand"></div>
        <div class="Content">Item 1<br/>Multiline test</div>
        <ul class="Container">
          <li class="Node ExpandLeaf IsLast">
            <div class="Expand"></div>
            <div class="Content">Item 1.1</div>
          </li>
        </ul>
      </li>
      <li class="Node ExpandLeaf IsLast">
        <div class="Expand"></div>
        <div class="Content">Item 2</div>
      </li>
    </ul>
  </li>
</ul>

Каркас из линий образуется дополнительными CSS-правилами.

1. Узел Node поддерживает вертикальную линию к своему следующему соседу
   

   .Node {
       margin-left: 18px;
       zoom: 1;
       /* линия слева образуется повторяющимся фоновым рисунком */
       background-image : url(/forum/img/i.gif);
       background-position : top left;
       background-repeat : repeat-y;
   }
   

2. Если соседа ниже нет, то линию вниз продолжать не надо:
   

   /* это правило - ниже .Node, поэтому имеет больший приоритет */
   .IsLast {
       /* добавить соединительную черточку наверх */
       background-image: url(/forum/img/i_half.gif);
       background-repeat : no-repeat;
   }
   

Получается, что все узлы на одном уровне соединены вертикальной чертой.

Размер рисунков для фоновых черточек сделан такой, чтобы вертикальная черта проходила строго посередине иконок Expand.

Поэтому получается, что эти иконки автоматически "нанизываются" на вертикальную линию.

Чтобы получить более целостную картину, можно обновить иконки Expand, добавив к ним соединительную черту для подключения заголовка к вертикальной линии.

Вот такие новые иконки для Expand*-классов.

Вертикальные линии образуют каркас, а новые иконки Expand* присоединяют узлы к каркасу. Структурные линии построены .

Шаг 5. Скрытие-раскрытие

Для скрытия-раскрытия добавим два CSS-правила.

.ExpandOpen .Container {
	display: block;
}

.ExpandClosed .Container {
	display: none;
}

Как всегда, важен порядок. ExpandClosed идет после ExpandOpen, поэтому имеет больший приоритет, и вложенные закрытые узлы отображаются закрытыми.

Для скрытия-раскрытия javascript-функция всего лишь меняет класс узла. Остальное делает CSS.

Чтобы в дереве поддерживалось скрытие-раскрытие - достаточно повесить обработчик на самый внешний div.

И для красоты - обязательно поправить курсор при наведении на иконки скрытия/раскрытия:

.ExpandOpen .Expand, .ExpandClosed .Expand {
	cursor: pointer; /* иконки скрытия-раскрытия */
}

.ExpandLeaf .Expand {
	cursor: auto; /* листовой узел */
}

Обязательно задать определение для листового узла тоже, иначе курсор на нем тоже станет pointer (почему? - из-за вложенности div'ов).

<div onclick="tree_toggle(arguments[0])">
<div>Root</div>
<ul class="Container">
  <li class="Node IsRoot ExpandClosed">
    <div class="Expand"></div>
    <div class="Content">Item 1</div>
    <ul class="Container">
      <li class="Node ExpandClosed">
        <div class="Expand"></div>
        <div class="Content">Item 1.1</div>
        <ul class="Container">
          <li class="Node ExpandLeaf IsLast">
            <div class="Expand"></div>
            <div class="Content">Item 1.1.2</div>
          </li>
        </ul>
      </li>
      <li class="Node ExpandLeaf IsLast">
        <div class="Expand"></div>
        <div class="Content">Item 1.2</div>
      </li>
    </ul>
  </li>
  <li class="Node IsRoot ExpandClosed">
    <div class="Expand"></div>
    <div class="Content">Item 2<br/>title long yeah</div>
    <ul class="Container">
      <li class="Node ExpandLeaf IsLast">
        <div class="Expand"></div>
        <div class="Content">Item 2.1</div>
      </li>
    </ul>
  </li>
  <li class="Node ExpandOpen IsRoot IsLast">
    <div class="Expand"></div>
    <div class="Content">Item 3</div>
    <ul class="Container">
      <li class="Node ExpandLeaf IsLast">
        <div class="Expand"></div>
        <div class="Content">Item 3.1</div>
      </li>
    </ul>
  </li>
</ul>

</div>

А вот и сам обработчик события onclick. После правил CSS делать ему осталось всего ничего:

1. Определить, произошел ли клик на иконке Expand, используя event.target(или event.srcElement для IE)
2. Получить узел Node для иконки
3. Если узел - не лист, то поменять класс ExpandOpen <-> ExpandClosed

function tree_toggle(event) {
	event = event || window.event
	var clickedElem = event.target || event.srcElement

	if (!hasClass(clickedElem, 'Expand')) {
		return // клик не там
	}

	// Node, на который кликнули
	var node = clickedElem.parentNode
	if (hasClass(node, 'ExpandLeaf')) {
		return // клик на листе
	}

	// определить новый класс для узла
	var newClass = hasClass(node, 'ExpandOpen') ? 'ExpandClosed' : 'ExpandOpen'
	// заменить текущий класс на newClass
	// регексп находит отдельно стоящий open|close и меняет на newClass
	var re =  /(^|\s)(ExpandOpen|ExpandClosed)(\s|$)/
	node.className = node.className.replace(re, '$1'+newClass+'$3')
}


function hasClass(elem, className) {
	return new RegExp("(^|\\s)"+className+"(\\s|$)").test(elem.className)
}

Шаг 6. AJAX-индикация

Пока что мы строили дерево исключительно из HTML-разметки.

Полностью аналогично дерево работает при создании разметки при помощи Javascript. Как загружать данные с сервера в формате JSON, и многое другое Вы можете прочитать в цикле статей AJAX.

Здесь мы посмотрим, как добавить в дерево индикаторы обработки узла: .

Индикатор обработки, вообще говоря, может обозначать любые асинхронные операции. Начиная от загрузки детей и заканчивая удалением всего этого узла с сервера.

Опишем его CSS-правилом:

.ExpandLoading   {
    width: 18px;
    height: 18px;
    float: left;
    background-image: url(/forum/img/expand_loading.gif);
}

Класс ExpandLoading на время операции будет заменять обычный класс Expand.

Например, так может выглядеть участок дерева с активным узлом Item 1.1:

<ul class="Container">
<li class="Node IsRoot IsLast ExpandOpen">
	<div class="Expand"></div>
	<div class="Content">Item 1</div>
	<ul class="Container">
		<li class="Node ExpandOpen IsLast">
			<div class="ExpandLoading"></div>
			<div class="Content">Item 1.1</div>
			<ul class="Container">
				<li class="Node ExpandOpen">
					<div class="Expand"></div>
					<div class="Content">Item 1.1.1</div>
				</li>
			</ul>
		</li>
	</ul>
</li>
</ul>

Шаг 7. Дополнительные возможности

Вы можете пожелать добавить в дерево дополнительные элементы. Например, чекбоксы или иконки с типом узла.

Для добавления, например, чекбокса <input type="checkbox"> после иконки Expand, нужно для начала вставить его в структуру сразу после иконки открытия/закрытия.

Указываем размеры, отступ и float: left:

/* Общий размер 14+2+2 = 18 - такой же как Expand */
.Node input {
    width: 14px;
    height: 14px;
    float: left; 
    margin: 2px;
}

Теперь, сохраняя двухколоночную верстку, нужно отодвинуть Content вправо уже не на 18, а на общую ширину двух float'ов - 36px.

После того как сдвинулся заголовок Content - естественно сдвинуть и сам узел Node, чтобы структурная линия шла от заголовка.

Все это осуществляется добавлением пары правил:

/* подвинем за оба float'а Node, Content */
.Node, .Content {
	margin-left: 36px;
}
/* заново переопределим .IsRoot */
.IsRoot { margin-left: 0; }

<div onclick="tree_toggle(arguments[0])">
<div>Root</div>
<ul class="Container">
  <li class="Node IsRoot ExpandOpen">
    <div class="Expand"></div>
    <input type="checkbox"/>
    <div class="Content">Item 1</div>
    <ul class="Container">
      <li class="Node ExpandOpen">
        <div class="Expand"></div>
        <input type="checkbox"/>
        <div class="Content">Item 1.1 </div>
        <ul class="Container">
          <li class="Node ExpandLeaf IsLast">
            <div class="Expand"></div>
            <input type="checkbox"/>
            <div class="Content">Item 1.1.2</div>
          </li>
        </ul>
      </li>
      <li class="Node ExpandLeaf IsLast">
        <div class="Expand"></div>
        <input type="checkbox"/>
        <div class="Content">Item 1.2</div>
      </li>
    </ul>
  </li>
  <li class="Node IsRoot ExpandOpen">
    <div class="Expand"></div>
    <input type="checkbox"/>
    <div class="Content">Item 2<br/>title long yeah</div>
    <ul class="Container">
      <li class="Node ExpandLeaf IsLast">
        <div class="Expand"></div>
        <input type="checkbox"/>
        <div class="Content">Item 2.1</div>
      </li>
    </ul>
  </li>
  <li class="Node ExpandOpen IsRoot IsLast">
    <div class="Expand"></div>
    <input type="checkbox"/>
    <div class="Content">Item 3</div>
    <ul class="Container">
      <li class="Node ExpandLeaf IsLast">
        <div class="Expand"></div>
        <input type="checkbox"/>
        <div class="Content">Item 3.1</div>
      </li>
    </ul>
  </li>
</ul>
</div>

Скачать CSS, JS и картинки

В принципе, можно использовать и CSS/JS/картинки напрямую со страницы, но они содержат некоторое количество лишних классов.

Для удобства дерево все-в-одном с JS/CSS/HTML находится на отдельной странице. В этом примере полностью расписано дерево без AJAX-индикации и чекбоксов.

Кроме того, можно скачать материалы по статье:

• Скачать картинки
• CSS для дерева без линий
• CSS для дерева c линиями
• Javascript для скрытия/раскрытия узлов
• Дополнительные CSS-правила для чекбоксов

При использовании в своем окружении Вы, наверное, захотите удлинить все классы. добавив какой-то префикс. Например, TreeContainer, TreeNode, и т.п.

Другой вариант, возможно, более удобный - ограничить классы внешним селектором. Например, .Tree .Container, .Tree .Node, * html .Tree .Content и т.п.