I'm not aware of any modules to do this (which is not to say they don't exist, just that I've never had the need to do something like this), but its a relatively simple problem.

The first thing to do is to get the data structure in place. Something like this might do the job:

{
  name     => 'node_name'
  id       => 'node_id'
  children => [ # Hash refs just like the example here
                #  but nested
              ]
}

[download]

You could populate it by getting the data with a few SQL queries. First grab the nodes where there is no parent id, then, for each one grab the nodes where the id is the same as the node you are looking at. A recursive function is likely to be your friend here. (Solutions involving grabbing all the data at once and then finding children in Perl might be more efficient).

Next you implement the view in HTML. Outputting a series of nested lists is probably a good bet. You can include an extra list item in each on with an "Add node here" link.

You can them implement expanding/collapsing nodes with JavaScript, or use Ajax to avoid having to leave the page to fill in details of the new node and then repopulate the entire tree.

In reply to Re: Web Interface to Tree Structure Pulled from DB. by dorward
in thread Catalyst Interface to Display Tree Structure Pulled from DB. by tphyahoo

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.