Constructing routing lines for large tree structure using the ancestry gem

I am using the ancestry gem and have followed the railscasts episode here to get the gem to work, which works perfectly.

I have created a fairly large ancestry tree, and although the parents and children are nested by indenting the fields, i prefer some sort of routing lines. The picture below show the small part of the total tree.

I would like to have a structure look like this/ or something similar

I tried to play around with the structure by adding lines, but i just seem to end up in smoke.

Each parent and child is given a separate div field like this(in a helper). just like the railscasts episode.

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

How can this be done, if possible. Any hints?

I would not try to create lines using div and css tricks. You are trying to build an element of a UI like a navigation tree. Just go all in on a real UI library like jsTree. Use rails to create the data structure (you've already done this), render a static HTML <ul> list (this should be easy to convert your <div>s to list elements). Then let javascript render the view of that data structure (lines etc) and you'll get interactivity and other stuff for free. :)

Here's the main site: http://www.jstree.com/

Check out this demo: http://www.jstree.com/documentation/core#demos

Look at the source of the page and you'll see <div id="demo2" ...> where the magic starts happening.

Installing JQuery and this plugin should be fairly easy in Rails 3 (in 3.1 you already have JQuery).