How to Build a jQuery Treeview

Those of us who are used to GUI frameworks are used to the many components often built in. Everything from textboxes to progress bars are at our disposal. But when you move to the web there are no 'built in' version of many of these building blocks. The treeview has many incarnations on the web, and there is good reason. It is a versatile component, usable in any type of collection management. There are many ways to get a treeview going on the web, but today we will be taking jQuery and making a quick and dirty treeview - one that can be built and used in a matter of minutes.

So, to start with, we are going to need some data. Our treeview is going to take an array of data and build an HTML treeview from it. I prefer JSON, but you can use traditional XML if you want, either way will work. Our data looks something like this:

Notice that we have a title and items, and basically take this structure and repeat it in our sub menu. With the treeview builder we are going to create, you can have as many submenus you want, as long as you keep that basic structure.

For our treeview, we are going to make a js object, which we can add to or update later on. To start, we are gong to make the basic object:

So what we are going to do construction wise is take in the data and a container to put the finished treeview in. You can just take in the data and set the tree property if you want, but I prefer the object constructor to do that for me. This way we have a reference to the tree's container, just in case we need it.

Now, as of right now we are calling a build method that is missing. Of course this is the meat of the whole treeview object, so let's get to building the build method.

This build method is not terribly complex or large, but there is no real good way to break it into parts, so here it is:

The very first thing we do is take the node title and replace all spaces with underscores. This way there are no spaces in the element id. Then, we have to make the base node div. Simple enough, and we give it a 5px margin, so all sub nodes are offset. Then we add the expand node div, which is what you click to expand the node. After that we get into the real crazy parts. Of course the node contents div is not crazy, but the items that go inside it are. For each item in the items array, we first test the type of the item. If it is a string or number, take it and make it into a node item. In this case, we are taking the item's id from the array and using it as the title. But you can simply list the item if you want. That is the great thing about this treeview, it is really simple to modify it however you want.

Now, if the item happens to be an object, we assume it is a new node and build it. This recursive behavior allows us to add as many nodes and sub nodes as we want. It will just keep building until it can't anymore. After all the items are built, we need to add the functionality. With jQuery this is incredibly easy. We first hide the node contents and add it to the node base div. Finally, we take the expand div and add a click event. This click event takes the expand button's parent (the node base div), then grabs its children, and selects the "NodeContents" div from this list of children. This finds the buttons related content, no matter what sub node it is in. This is because the find is relative to itself, using jQuery's awesome selectors. Once we are done with all that, we return the node object.

All we have to do is add this function to the Treeview object. We are going to add it above the construct code, so we can access this function. The final object will look something like so:

All this javascript is fun and neat, but it accomplishes little without its CSS counterpart. The CSS is actually pretty straight forward and simple in this case:

Pretty straight forward CSS. The last thing to do is use it all:

This code, of course, goes somewhere in your HTML page, and you can pass it any element reference you want. This type of treeview is good for data driven treeviews, and is not the best, but it is easy to build and quick to get going. All you need is some data and somewhere to put the treeview.

This is about it for this tutorial. I hope this quick and simple treeview will provide something to get you going. jQuery has a lot to offer, so I suggest checking out our other jQuery tutorials. Just remember, when you need programming help or advice, all you have to do is Switch On The Code.