CODEWITHSUNDEEP
javascriptjqueryhtmlcsstree
TheHorse
TheHorse

Reputation: 234

Displaying data in a tree model in HTML/CSS/JQuery

I'm looking to display a very large set of data in a tree model. Nodes may have multiple children, as well as multiple parents. Ideally the tree should be dynamic as it represents dynamic data.

I have taken a look at a few different JS libraries such as D3, Raphael, etc. and while they fit the bill, I am not able use any JS libraries other than JQuery. I am looking for a solution using only HTML, CSS, and JS/JQuery.

The sole audience is IE8.

Any suggestions?

Upvotes: 2

Views: 3312

Answers (1)

floor
floor

Reputation: 1572

Html itself is a representation of a tree structure. Each element is a node and elements inside a node are children well the node itself is a parent.

If displaying data is all that is needed you could do it like:

<div> <-- Parent
     <p>Data Node Parent</p> <-- Data
     <div> <-- Child
         <p>Data Node Child</p> <-- Child Data
     </div>
</div>

Then use some css to style it like a like a tree.

Using jquery you can traverse the dom (tree) and add the data to each of these elements and or create the elements dynamically based on the data. You would be using methods like .next() .prev() .parent() .child()

http://api.jquery.com/category/traversing/

http://api.jquery.com/category/manipulation/

Upvotes: 4

Related Questions