QuickStart

Here is an example demonstrating how to create a very simple treetable. The source code can be found in simple.html

  1. Copy the stylesheet, javascript and images folder in the directory where you will create your html file.
  2. Create a new html file and edit it.
  3. Create a table with 3 lines and 5 columns.
  4. Add in the head section :
    <script src="javascripts/extendedArray.js" type="text/javascript"></script>
    <script src="javascripts/treetable.js" type="text/javascript"></script>
    <script src="javascripts/utils.js" type="text/javascript"></script>
    <link href="stylesheets/treetable.css" media="all" rel="Stylesheet" type="text/css" />
  5. Add an event in the body tag in order to have all the rows collapsed when the page appear :
    <body onload="collapseAllRows();">
  6. In the 3 first rows add in a cell a div which will contain the icon of the folder or the doc or whatever. This div will
    have a class which will specify the offset of the icon :
    <div class="tier0">...</div> for no offset, i.e. for the root of the tree
    <div class="tier1">...</div> for the first level of the tree, and so on...
  7. In each div we just created add a link, i.e. <a...>, which will represent the doc icon or the folder icon
    <a href="#" onclick="toggleRows(event, this)" onmousedown="storeMouseXY(event); return false;" class="folder"></a>
  8. In the last row which will represent a document do the same as before but the link will look like :
    <a href="#" class="doc"></a>

That's it ! Try it and will see that the tree table is working fine.
Of course in the real world you certainly won't do it by hand but let your php/asp/jsp/RoR/etc... generate it.