Cross-browser JavaScript TreeView

I'm going to have a go at putting up a working example of my Cross-browser JavaScript TreeView Control working, plus an example of how you can use it on your website!

So here I go...



It works under Firefox (version 1.0.8 through 2 (even the new Beta version)) and the dreaded Internet Explorer (version 5.0 and up).

I've currently finished my first Web-based Content Management System (WebCMS) which uses this treeView for the organisation of your files on the web server, but I build the Tree Nodes dynamically using my beloved Perl!

Please feel free to download the files and use them as you wish. I only ask that you leave my name in them for my personal credit/ego q:) I've created a .TAR.GZ for you to download

Code Explanation

1. Firstly, create an HTML file and link the Style Sheet and JavaScript files like so:
   
   <link rel="stylesheet" type="text/css" href="tv.css" />
   <script type="text/javascript" src="treeView3.js"></script>
   <script type="text/javascript" src="treeViewConfig.js"></script>
   
   
   


2. Next, include the call to the function that starts it all off, renderTreeView();
   
   <script type="text/javascript">
   
   renderTreeView();
   
   </script>
   
   
   somewhere inside the BODY tag
   


3. Save your HTML file and edit your treeViewConfig.js file. It doesn't have to be called this, but it makes sense that's all. The treeViewConfig.js file must have at least the following items for the renderTreeView(); function to do anything of interest at all
   
   imageDir = "[path_to_tv_directory_with_images_in_it]";
   
   createRootNode([rootNodeID], "[Root Node Label To Display]", "javascript:toggleNode([roodNodeID]);", "[frame_to_perform_action_in]", 0, 1);
   
   addNode([nodeID], [parentNodeID], "[Child Node Label To Display]", "[action_to_perform_when_node_is_clicked]", "[frame_to_perform_action_in]", 2, 2);
   
   
   


4. Load your HTML file in a browser

I'll give you a bit more explanation of the functions mentioned in step 3.

imageDir = "[path_to_tv_directory_with_images_in_it]";

This sets the path to all the images that the TreeView will use during it's rendering. Without this set correctly, the TreeView will render but all these broken image links will appear, making it look like crap. It's relative to the HTML file I believe (I could be wrong), just have a play around with it.

createRootNode([rootNodeID], "[Root Node Label To Display]", "javascript:toggleNode([roodNodeID]);", "[frame_to_perform_action_in]", 0, 1);

Every TreeView requires a Root Node (ok, that's not entirely true simply because you can have a TreeView without a Root Node but that's not the way I've designed this one). This TreeView requires a Root Node q:)

The createRootNode() function allows you to give the Root Node an ID to which every other Child Node can be added to (typically make this a Numerical Value, it's easier to parse trees this way, though String Values will work, just slower). It also allows you to specify the Label that appears for the Root Node. This can include any HTML you see fit.

Next is the "javascript:toggleNode([roodNodeID]);" parameter. This forms the <A HREF=""> part of the code that's generated, so whatever you can stick inside a normal <A HREF=""> attribute will happily go in here.

The "[frame_to_perform_action_in]" parameter in most cases for you, will be a blank string (ie. ""). This was included incase you decided to do a two framer version where the left frame would hold the TreeView and the content accessed by the Nodes would be displayed in the right frame. If this is the case, the value for this typically would always be the name of the right frame.

And lastly, the 0, 1 parameters. These are simply image indicies within the IMAGELIST array. At the moment, the first image that I load is the Plus Node icon which means that the Root Node by default would be closed, second image that I load is the Minus Node icon, so this specifies that if I have not selected this Node, use IMAGELIST[0]. If I've selected the Node use IMAGELIST[1] and so on.

Finally, the addNode([nodeID], [parentNodeID], "[Child Node Label To Display]", "[action_to_perform_when_node_is_clicked]", "[frame_to_perform_action_in]", 2, 2); code. This line is almost identical to the createRootNode() function call except this now applies to Nodes within the Root Node. Same details apply to these parameters as they do for the createRootNode() except the [parentNodeID] obviously references a Node that this Child is going to belong to.

Well that's about it for my second post. A whole lot of waffling going on here, but somehow, I now kinda understand what Programming books are like 1000 pages long!