Javascript: как проще всего вывести дерево со сворачиванием и разворачиванием узлов?

Можно, конечно, как-то вот так изощряться с фреймворками, как я некогда сделал. А можно подумать, что DOM - уже само по себе дерево, и задать иерархию проще всего любыми нравящимися нам вложенными тегами HTML. Потом написать на яваскрипте метод, задающий вложениями блочных тегов нужное поддерево документа, например, такое:

<ul id="doc" style="display: none;">
 <li>First
 <li>Second
  <ul>
   <li>2.1
   <li>2.2
   <li>2.3
 </ul>
 <li>Third
</ul>

По id="doc" мы будем находиться нужную часть документа, а чтобы не было показа тегов до их разворачивания, отключаем показ этой части документа через стиль.

Теперь в заголовочной (или другой) секции HTML-документа напишем код для разворачивания и сворачивания узлов нашего дерева:

<script type="application/javascript">
function makeTree(element, parent) {
 var t = createItem("div", "tree", parent);
 var tog = createItem("span", "toggle", t);
 var h = createItem("span", "tag", t);
 if (element.tagName === undefined) {
  var txt = element.textContent;
  if (txt.length > 0 && txt.match(/\S/)) {
   //h = createItem("div", "txt", t);
   h.textContent = txt;
  }
  return t;
 }
 tog.textContent = "-";
 tog.onclick = function () { clicked(tog); }
 h.textContent = element.nodeName;
 var children = element.childNodes;
 for (var i = 0; i != children.length; i++) makeTree(children[i], t);
 return t;
}
 
function clicked(element) {
 var is_on = element.textContent == "-";
 element.textContent = is_on ? "+" : "-";
 element.parentNode.className = is_on ? "tree-hide" : "tree";
}

function createItem(tag, className, parentNode) {
 var e = document.createElement(tag);
 e.className = className;
 if (parentNode) parentNode.appendChild(e);
 return e;
}

function getTd (id) { return document.getElementById(id); }

function getTree (id) {
 getTd('tree').textContent = "";
 getTd('tree').appendChild(makeTree(getTd(id), null));
}
</script>
<noscript>
 <div align="center">Для работы приложения нужен включённый в браузере Javascript!</div>
</noscript>

Он будет искать нужное место в документе, где строится дерево тегов, по id="tree".

Подберём подходящий стиль:

<style>
 #tree { white-space: pre; font-family: monospace; border: 1px solid }
 .tree > .tree-hide, .tree > .tree
  { margin-left: 2em; border-left: 1px dotted rgba(0,0,0,.4)}
 .tree-hide > .tree, .tree-hide > .tree-hide 
  { display: none }
 .tag { color: navy; }
 .tree-hide > .tag { color: maroon; }
 .toggle { display: inline-block; width: 2em; text-align: center }
</style>

И вызовем всё это:

<div id="tree"><a href="javascript:getTree('doc')">Разверни меня</a></div>

Вот что вышло, с ветками можно обращаться как обычно - разворачивать щелчком по "+" и сворачивать по "-":

• First
• Second
  • 2.1
  • 2.2
  • 2.3
• Third

Должно работать в любом современном браузере. А недостатки подхода будут такими:

• "дерево ссылок" не сделать, ведь <A> - такой же тег и тоже будет развёрнут - но мы задачи сделать меню здесь не ставили, да и громоздкий JQuery не понадобился :)
• наш код показывает в качестве наименований узлов дерева наименования соответствующих тегов из HTML-кода - но это, при желании, можно поправить :)

26.06.2016, 14:46 [6593 просмотра]