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

Answer 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