QuickStart
Here is an example demonstrating how to create a very simple treetable. The
source code can be found in simple.html
- Copy the stylesheet, javascript and images folder in the directory where
you will create your html file.
- Create a new html file and edit it.
- Create a table with 3 lines and 5
columns.
- 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" />
- Add
an event in the body tag in order to have all the rows collapsed when the page
appear :
<body onload="collapseAllRows();">
- 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...
- 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>
- 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.