Построение линий маршрутизации для большой древовидной структуры с использованием драгоценного камня предков

Question

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

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

Мне бы хотелось, чтобы структура выглядела так / или что-то похожее

Я пытался поэкспериментировать со структурой, добавляя строки, но я, кажется, просто попал в дым.

Каждому родителю и ребенку предоставляется отдельное поле divкак это (в помощнике).как в эпизоде ​​с рейлкастами.

def nested_messages(messages)
  messages.map do |message, sub_messages|
    render(message) + content_tag(:div, nested_routes(sub_messages), :class => "nested_messages")
  end.join.html_safe
end

Как это можно сделать, если это возможно.Есть подсказки?

Answer 1

Я бы не пытался создавать линии, используя трюки div и css. Вы пытаетесь создать элемент пользовательского интерфейса, такой как дерево навигации. Просто идите ва-банк с реальной библиотекой пользовательского интерфейса, такой как jsTree. Используйте rails для создания структуры данных (вы уже сделали это), визуализируйте статический список HTML <ul> (это должно быть легко преобразовать ваши <div> s в элементы списка). Затем позвольте javascript визуализировать вид этой структуры данных (строки и т. Д.), И вы получите интерактивность и другие вещи бесплатно. :)

Вот основной сайт: http://www.jstree.com/

Проверьте это демо: http://www.jstree.com/documentation/core#demos

Посмотрите на источник страницы, и вы увидите <div id="demo2" ...>, где начинается магия.

Установка JQuery и этого плагина должна быть довольно простой в Rails 3 (в 3.1 у вас уже есть JQuery).