convert parent/child data to HTML tree structure using jquery

Question

I have a Java List containing objects with hierarchical data (id, name, parentId) and need to generate an HTML tree structure (using something like DynaTree) with expand/collapse features. All the examples I've seen require generating nested <ul> structures to represent parent/child/.../n-child/ hierarchies, etc.

I could convert the data to build this structure. But, I'd think this data format would work in its current form (id/name/parentId). Is there a jquery API that can handle this data?

here is an abbreviated example..

//Category has an id, name, parentId
List<Category> categoryTree = new ArrayList<Category>();
categoryTree.add(new Category(1, 'root', null));
categoryTree.add(new Category(2, 'colors', 1));
categoryTree.add(new Category(3, 'blue', 2));
categoryTree.add(new Category(4, 'red', 2));
categoryTree.add(new Category(5, 'shapes', 1));
categoryTree.add(new Category(6, 'round', 5));

//now, I need to convert this to dynamic javascript to build the tree structure (<ul>, etc)

I've used SmartGWT like this before and its trivial to convert this into a tree node structure (see this example). I'd think there was a jQuery API to do the same...perhaps not

1. Where is a code sample? 2. What is your reasoning for not doing it the way it is done? 3. Where is the code to do it using the <ul> technique so that someone can think about bettering or optimizing it? — bPratik
– bPratik, Commented Mar 14, 2012 at 0:07
You could use only DIV elements with suitable nesting and margin or padding to show relationships. Attributes and values can use SPAN elements. I think that would be much simpler and more flexible than a structure using a list. Whether you use jQuery or not is irrelevant. — RobG
– RobG, Commented Mar 14, 2012 at 0:07
@bPratik, see the link to DynaTree...that is the format they are looking for.... — Ben ODay
– Ben ODay, Commented Mar 14, 2012 at 1:06
@RobG, jquery is relevant because I want a tree structure (expand/collapse, nested, etc)...and don't want to reinvent the wheel in Javascript/CSS — Ben ODay
– Ben ODay, Commented Mar 14, 2012 at 1:07
@boday—the code to do that is very simple, in any case it's a matter of first creating a suitable design (by whatever criteria you have) then looking at how to best implement it. — RobG
– RobG, Commented Mar 14, 2012 at 2:33

charlietfl · Accepted Answer · 2012-03-14 00:34:14Z

1

Here's a demo that might help

http://jsfiddle.net/charlietfl/pCsZ3/

It parses infinitely deep object with not a lot of jQuery and using only one append to DOM for the whole tree

If parsing from list it would be more efficent creating the object first anyway, otherwise you would be doing a lot of extra appending to DOM which isn't very efficient

answered Mar 14, 2012 at 0:34

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ben ODay Over a year ago

thanks charlie, this is sweet if I had the data in that format...just trying to reuse the id/name/parentId structure that I have...might just bite the bullet and convert it to match, but I thought I'd ask :)

charlietfl Over a year ago

nesting has to be done somewhere, unless you intend not to load children immediately as in load on demand like a click of a folder in tree in which case you might be able to treat things differently

Ben ODay Over a year ago

guess the SmartGWT tree API spoiled me...it worked fine with this structure, but we just ditched it and I need to convert to good old html/css/jquery...thanks again

charlietfl Over a year ago

perhaps jstree might be of benefit... jstree.com then model data to fit it

Collectives™ on Stack Overflow

convert parent/child data to HTML tree structure using jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related