ActsAsTreeTable

To download releases of this plugin, visit ActsAsTreeTable's project page. The source code of this plugin and this documentation is available on GitHub: http://github.com/ludo/jquery-plugins/tree/master/acts_as_tree_table.

Table of Contents

1. Introduction
2. Installation
3. Usage
   1. Include the plugin in your html document
   2. Representing your tree in a table
   3. Optional settings
4. Examples
   1. Displaying a directory structure
   2. A more advanced tree
   3. An advanced tree that is not collapsable

1. Introduction

ActssTreeTable is a plugin for jQuery, the 'Write Less, Do More, JavaScript Library'. With this plugin you can display a tree in a table, i.e. a directory structure or a nested list. Why not use a list, you say? Because lists are great for displaying a tree, and tables are not. Oh wait, but this plugin uses tables, doesn't it? Yes. Why do I use a table to display a list? Because I need multiple columns to display additional data besides the tree.

This plugin is released under the MIT license by Ludo van den Boom.

Unobtrusiveness

I wanted this plugin to be as unobtrusive as possible. Being 'unobtrusive' is very cool nowadays, so that was an important requirement. But it is cool for a reason: it keeps your html documents clean and it allows my code to degrade nicely when JavaScript is not available.

Unfortunately, the ActsAsTreeTable plugin requires that you add class and id attributes to every row that is part of the tree. It would have been great if this weren't necessary, because it doesn't look pretty in your html, but the plugin needs to know what your tree looks like. Otherwise, it would have to guess the structure of the tree and it wouldn't be very successful in doing that. See the Usage chapter for more information on how to describe a tree.

Features

• It can display a tree of data in a table column.
• It does this as unobtrusively as possible.
• It allows branches to be collapsed and expanded (think of how a directory structure works in most file explorers).
• It allows unlimited tree depth.
• It uses the lightweight jQuery JavaScript libray.

Example

See the Examples chapter for more examples.

2. Installation

Installing this plugin is straight-forward. You will have to copy several files and, if necessary, adjust some paths so that every file is available to the plugin.

1. Add jQuery to your project. See their website for instructions on doing this. You need at least version 1.2.6.
2. Add src/jquery.acts_as_tree_table.js to your project.
3. Add the stylesheet src/stylesheets/jquery.acts_as_tree_table.css to your project.
4. Copy the images in src/images to your project.
5. Adjust the paths to background-images in the stylesheet jquery.acts_as_tree_table.css to point to the image files that you have just copied.

That's it! You are now ready to start using the plugin in your project.

3. Usage

Note: This chapter assumes that you have already installed jQuery as described on their website.

3.1 Include the plugin in your html document

Paste the following code between the head tags in your html document, underneath the part where you include jQuery. Change the red parts to reflect your situation.

<link href="path/to/jquery.acts_as_tree_table.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="path/to/src/jquery.acts_as_tree_table.js"></script>
<script type="text/javascript">
	
$(document).ready(function()  {
	$("#your_table_id").acts_as_tree_table();
});
	
</script>

3.2 Representing your tree in a table

When you pasted the above code and adjusted it to reflect your situation, you enabled the possibility of displaying a tree in your table. To make the tree actually display as a tree you have to add id and class attributes to your table rows (tr).

How to do this?

First, you should add a unique id to each of the rows in your table, for example 'node-x' where x is a number. Then you add a class attribute to each child of a node, give this class a name of 'child-of-node-x'. The node-x part should be the same as the id of its parent. Do you still follow me? Let me show you an example of a very simple tree: a single parent with a single child. For more examples you should view the source code of this page, where you find several tables for the examples in the Examples chapter.

<table id="tree">
  <tr id="node-1">
    <td>Parent</td>
  </tr>
  <tr id="node-2" class="child-of-node-1">
    <td>Child</td>
  </tr>
</table>

3.3 Optional settings

There are several settings that let you adjust the behavior of the plugin. Each of these settings is described in this section. See Example 3 for an example of how to change these settings.

4. Examples

The examples in this chapter all use the ActsAsTreeTable plugin to display a tree in a table, with collapsable branches. View the source code of this file to see how it is done and read the Usage chapter for further details.

4.1 Displaying a directory structure

4.2 A more advanced tree

4.3 An advanced tree that is not collapsable

$("#example3").acts_as_tree_table({
	expandable: false
});