treeTable/MIT_LICENSE
treeTable/README.markdown
treeTable/src/javascripts/jquery.treeTable.min.js
@@ -1,5 +1,7 @@
-== 2.0 - Not Released Yet
+== 2.0 - 12 November 2008
* Renamed plugin from ActsAsTreeTable to treeTable
+* Added appendBranchTo function for easier manipulation of the tree with drag & drop
+* Added option 'child_prefix' to allow customisation of the prefix used for node classes (default: 'child-of-')
* Renamed option 'default_state' to 'initialState'
* Changed initialState from 'expanded' to 'collapsed'
* Refactored collapse/expand behavior
treeTable/CHANGELOG
@@ -53,6 +53,19 @@
});
</script>
+
+ <style type="text/css">
+
+ /* Prevent text selection */
+ /* TODO IE: needs unselectable="on" attribute? */
+ .acts_as_tree_table {
+ -khtml-user-select: none; /* WebKit */
+ -moz-user-select: none; /* Mozilla */
+ -o-user-select: none; /* Opera */
+ user-select: none; /* CSS3 */
+ }
+
+ </style>
<!-- END Plugin Code -->
</head>
treeTable/doc/dnd.html
@@ -2,7 +2,7 @@
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
- <title>Documentation - jquery.treeTable</title>
+ <title>jQuery treeTable Plugin Documentation</title>
<link href="stylesheets/master.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascripts/jquery.js"></script>
@@ -14,15 +14,369 @@
$(document).ready(function() {
$(".example").treeTable();
- });
+ $("#example3").treeTable({
+ expandable: false
+ });
+ });
+
</script>
<!-- END Plugin Code -->
</head>
<body>
+<h1>jQuery treeTable Plugin Documentation</h1>
+
<table class="example">
+ <caption>Simple treeTable Example</caption>
+ <thead>
+ <tr>
+ <th>TreeColumn</th>
+ <th>Additional data</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr id="ex0-node-1">
+ <td>Node 1: Click on the icon in front of me to expand this branch.</td>
+ <td>I live in the second column.</td>
+ </tr>
+ <tr id="ex0-node-1-1" class="child-of-ex0-node-1">
+ <td>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
+ <td>Interesting.</td>
+ </tr>
+ <tr id="ex0-node-1-1-1" class="child-of-ex0-node-1-1">
+ <td>Node 1.1.1: I am part of the tree too!</td>
+ <td>That's it!</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>See the <a href="#examples">Examples</a> chapter for more examples. To download releases of this plugin, visit <a href="http://plugins.jquery.com/project/treeTable">treeTable's project page</a>. The source code of this plugin and this documentation is available on GitHub: <a href="http://github.com/ludo/jquery-plugins/tree/master/treeTable">http://github.com/ludo/jquery-plugins/tree/master/treeTable</a>.</p>
+
+<h2>Table of Contents</h2>
+
+<ol>
+ <li><a href="#introduction">Introduction</a></li>
+ <li><a href="#installation">Installation</a></li>
+ <li><a href="#usage">Usage</a>
+ <ol>
+ <li><a href="#head">Include the plugin in your html document</a></li>
+ <li><a href="#tree">Representing your tree in a table</a></li>
+ <li><a href="#settings">Configuration</a></li>
+ </ol>
+ </li>
+ <li><a href="#examples">Examples</a>
+ <ol>
+ <li><a href="#example-1">Displaying a directory structure</a></li>
+ <li><a href="#example-2">A complex tree</a></li>
+ <li><a href="#example-3">A tree that is not collapsable</a></li>
+ </ol>
+ </li>
+</ol>
+
+<h2>1. <a name="introduction">Introduction</a></h2>
+<p>treeTable is a plugin for <a href="http://jquery.com">jQuery</a>, 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.</p>
+
+<p>This plugin is released under the MIT license by <a href="http://blog.cubicphuse.nl">Ludo van den Boom</a>.</p>
+
+<h4>Unobtrusiveness</h4>
+<p>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.</p>
+
+<p>Unfortunately, the treeTable plugin requires that you add <tt>class</tt> and <tt>id</tt> 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 <a href="#usage">Usage</a> chapter for more information on how to describe a tree.</p>
+
+<h4>Features</h4>
+<ul>
+ <li>It can display a tree of data in a table column.</li>
+ <li>It does this as unobtrusively as possible.</li>
+ <li>It allows branches to be collapsed and expanded (think of how a directory structure works in most file explorers).</li>
+ <li>It allows unlimited tree depth.</li>
+ <li>It uses the lightweight <a href="http://jquery.com">jQuery</a> JavaScript libray.</li>
+</ul>
+
+<p>NOTE: This plugin was originally released under the name ActsAsTreeTable, but has been renamed to treeTable with version 2.0.</p>
+
+<h2>2. <a name="installation">Installation</a></h2>
+<p>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.</p>
+
+<ol>
+ <li>Add <a href="http://jquery.com">jQuery</a> to your project. See their website for instructions on doing this. You need at least version 1.2.6.</li>
+ <li>Add <a href="../src/javascripts/jquery.treeTable.js"><tt>src/javascripts/jquery.treeTable.js</tt></a> (or the <a href="../src/javascripts/jquery.treeTable.min.js">minified</a> version) to your project.</li>
+ <li>Add the stylesheet <a href="../src/stylesheets/jquery.treeTable.css"><tt>src/stylesheets/jquery.treeTable.css</tt></a> to your project.</li>
+ <li>Copy the images in <a href="../src/images"><tt>src/images</tt></a> to your project.</li>
+ <li>Adjust the paths to <tt>background-image</tt>s in the stylesheet <tt>jquery.treeTable.css</tt> to point to the image files that you have just copied.</li>
+</ol>
+
+<p>That's it! You are now ready to start <a href="#usage">using</a> the plugin in your project.</p>
+
+<h2>3. <a name="usage">Usage</a></h2>
+<p><b>Note:</b> This chapter assumes that you have already installed jQuery as described on their website.</p>
+
+<h3>3.1 <a name="head">Include the plugin in your html document</a></h3>
+<p>Paste the following code between the <tt>head</tt> tags in your html document, <b>underneath</b> the part where you include jQuery. Change the <b style="color: #f00;">red</b> parts to reflect your situation.</p>
+
+<pre class="listing">
+<link href="<b>path/to/</b>jquery.treeTable.css" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="<b>path/to/</b>jquery.treeTable.js"></script>
+<script type="text/javascript">
+
+$(document).ready(function() {
+ $("<b>#your_table_id</b>").treeTable();
+});
+
+</script>
+</pre>
+
+<h3>3.2 <a name="tree">Representing your tree in a table</a></h3>
+<p>When you pasted the above code and adjusted it to reflect your situation, you enabled the <em>possibility</em> of displaying a tree in your table. To make the tree actually display as a tree you have to add <tt>id</tt> and <tt>class</tt> attributes to your table rows (<tt>tr</tt>).</p>
+
+<h4>How to do this?</h4>
+<p>First, you should add a <em>unique</em> <tt>id</tt> to each of the rows in your table, for example '<tt>node-<em>x</em></tt>' where <em>x</em> is a number. Then you add a <tt>class</tt> attribute to each child of a node, give this class a name of '<tt>child-of-<em>node-x</em></tt>'. The <em>node-x</em> part should be the same as the <tt>id</tt> 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 <a href="#examples">Examples</a> chapter.</p>
+
+<pre class="listing">
+<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>
+</pre>
+
+<h3>3.3 <a name="settings">Configuration</a></h3>
+<p>There are several settings that let you adjust the behavior of the plugin. Each of these settings is described in this section. See <a href="#example-3">Example 3</a> for an example of how to change these settings.</p>
+
+<table>
+ <thead>
+ <tr>
+ <th>Setting</th>
+ <th>Type</th>
+ <th>Default</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><tt>childPrefix</tt></td>
+ <td><tt>string</tt></td>
+ <td><tt>"child-of-"</tt></td>
+ <td>Customize the prefix used for node classes.</td>
+ </tr>
+ <tr>
+ <td><tt>expandable</tt></td>
+ <td><tt>bool</tt></td>
+ <td><tt>true</tt></td>
+ <td>Should the tree be expandable? An expandable tree contains buttons to make each branch with children collapsable/expandable.</td>
+ </tr>
+ <tr>
+ <td><tt>indent</tt></td>
+ <td><tt>int</tt></td>
+ <td><tt>19</tt></td>
+ <td>The number of pixels that each branch should be indented with.</td>
+ </tr>
+ <tr>
+ <td><tt>initialState</tt></td>
+ <td><tt>string</tt></td>
+ <td><tt>"expanded"</tt></td>
+ <td>Possible values: <tt>"expanded"</tt> or <tt>"collapsed"</tt>.</td>
+ </tr>
+ <tr>
+ <td><tt>treeColumn</tt></td>
+ <td><tt>int</tt></td>
+ <td><tt>0</tt></td>
+ <td>The number of the column in the table that should be displayed as a tree.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2>4. <a name="examples">Examples</a></h2>
+<p>The examples in this chapter all use the treeTable 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 <a href="#usage">Usage</a> chapter for further details.</p>
+
+<h3>4.1 <a name="example-1">Displaying a directory structure</a></h3>
+
+<table class="example">
+ <caption>Example 1: Displaying a directory structure.</caption>
+ <thead>
+ <tr>
+ <th>Title</th>
+ <th>Size</th>
+ <th>Kind</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr id="node-20">
+ <td><span class="file">CHANGELOG</span></td>
+ <td>4 KB</td>
+ <td>Plain text</td>
+ </tr>
+
+ <tr id="node-1">
+ <td><span class="folder">doc</span></td>
+ <td>--</td>
+ <td>Folder</td>
+ </tr>
+
+ <tr id="node-2" class="child-of-node-1">
+ <td><span class="folder">images</span></td>
+ <td>--</td>
+ <td>Folder</td>
+ </tr>
+
+ <tr id="node-8" class="child-of-node-2">
+ <td><span class="file">bg-table-thead.png</span></td>
+ <td>52 KB</td>
+ <td>Portable Network Graphics image</td>
+ </tr>
+
+ <tr id="node-9" class="child-of-node-2">
+ <td><span class="file">folder.png</span></td>
+ <td>4 KB</td>
+ <td>Portable Network Graphics image</td>
+ </tr>
+
+ <tr id="node-10" class="child-of-node-2">
+ <td><span class="file">page_white_text.png</span></td>
+ <td>4 KB</td>
+ <td>Portable Network Graphics image</td>
+ </tr>
+
+ <tr id="node-3" class="child-of-node-1">
+ <td><span class="file">index.html</span></td>
+ <td>4 KB</td>
+ <td>HTML document</td>
+ </tr>
+
+ <tr id="node-4" class="child-of-node-1">
+ <td><span class="folder">javascripts</span></td>
+ <td>--</td>
+ <td>Folder</td>
+ </tr>
+
+ <tr id="node-5" class="child-of-node-4">
+ <td><span class="file">jquery.js</span></td>
+ <td>56 KB</td>
+ <td>JavaScript source</td>
+ </tr>
+
+ <tr id="node-6" class="child-of-node-1">
+ <td><span class="folder">stylesheets</span></td>
+ <td>--</td>
+ <td>Folder</td>
+ </tr>
+
+ <tr id="node-7" class="child-of-node-6">
+ <td><span class="file">master.css</span></td>
+ <td>4 KB</td>
+ <td>CSS style sheet</td>
+ </tr>
+
+ <tr id="node-14">
+ <td><span class="file">MIT-LICENSE</span></td>
+ <td>4 KB</td>
+ <td>Plain text</td>
+ </tr>
+
+ <tr id="node-18">
+ <td><span class="file">README.markdown</span></td>
+ <td>4 KB</td>
+ <td>Markdown document</td>
+ </tr>
+
+ <tr id="node-11">
+ <td><span class="folder">src</span></td>
+ <td>--</td>
+ <td>Folder</td>
+ </tr>
+
+ <tr id="node-12" class="child-of-node-11">
+ <td><span class="folder">images</span></td>
+ <td>--</td>
+ <td>Folder</td>
+ </tr>
+
+ <tr id="node-15" class="child-of-node-12">
+ <td><span class="file">bullet_toggle_minus.png</span></td>
+ <td>4 KB</td>
+ <td>Portable Network Graphics image</td>
+ </tr>
+
+ <tr id="node-16" class="child-of-node-12">
+ <td><span class="file">bullet_toggle_plus.png</span></td>
+ <td>4 KB</td>
+ <td>Portable Network Graphics image</td>
+ </tr>
+
+ <tr id="node-13" class="child-of-node-11">
+ <td><span class="folder">stylesheets</span></td>
+ <td>--</td>
+ <td>Folder</td>
+ </tr>
+
+ <tr id="node-17" class="child-of-node-13">
+ <td><span class="file">jquery.treeTable.css</span></td>
+ <td>4 KB</td>
+ <td>CSS style sheet</td>
+ </tr>
+
+ <tr id="node-19" class="child-of-node-11">
+ <td><span class="file">jquery.treeTable.js</span></td>
+ <td>8 KB</td>
+ <td>JavaScript source</td>
+ </tr>
+
+ </tbody>
+</table>
+
+<h3>4.2 <a name="example-2">A complex tree</a></h3>
+
+<table class="example">
+ <caption>Example 2: A complex tree.</caption>
+ <tr id="ex2-node-1">
+ <td>Node 1</td>
+ </tr>
+ <tr id="ex2-node-1-1" class="child-of-ex2-node-1">
+ <td>Node 1.1</td>
+ </tr>
+ <tr id="ex2-node-1-2" class="child-of-ex2-node-1">
+ <td>Node 1.2</td>
+ </tr>
+ <tr id="ex2-node-1-3" class="child-of-ex2-node-1">
+ <td>Node 1.3</td>
+ </tr>
+ <tr id="ex2-node-2">
+ <td>Node 2</td>
+ </tr>
+ <tr id="ex2-node-2-1" class="child-of-ex2-node-2">
+ <td>Node 2.1</td>
+ </tr>
+ <tr id="ex2-node-2-1-1" class="child-of-ex2-node-2-1">
+ <td>Node 2.1.1</td>
+ </tr>
+ <tr id="ex2-node-2-2" class="child-of-ex2-node-2">
+ <td>Node 2.2</td>
+ </tr>
+ <tr id="ex2-node-2-2-1" class="child-of-ex2-node-2-2">
+ <td>Node 2.2.1</td>
+ </tr>
+ <tr id="ex2-node-2-2-1-1" class="child-of-ex2-node-2-2-1">
+ <td>Node 2.2.1.1</td>
+ </tr>
+ <tr id="ex2-node-2-2-2" class="child-of-ex2-node-2-2">
+ <td>Node 2.2.2</td>
+ </tr>
+</table>
+
+<h3>4.3 <a name="example-3">A tree that is not collapsable</a></h3>
+
+<pre class="listing">
+$("#example3").treeTable({
+ expandable: false
+});
+</pre>
+
+<table id="example3">
+ <caption>Example 3: A tree that is not collapsable.</caption>
<thead>
<tr>
<th>Tree column</th>
treeTable/doc/index.html
@@ -1,4 +1,4 @@
-/* jQuery TreeTable 2.0 */
+/* jQuery treeTable Plugin 2.0 - http://ludo.cubicphuse.nl/jquery-plugins/treeTable/ */
(function($) {
var options; // Helps to make options available to all functions
@@ -42,7 +42,7 @@
};
// Add an entire branch to +destination+
- $.fn.moveBranchTo = function(destination) {
+ $.fn.appendBranchTo = function(destination) {
var node = $(this);
var parent = parentOf(node);
@@ -100,7 +100,7 @@
function indent(node, value) {
var cell = $(node.children("td")[options.treeColumn]);
- var padding = parseInt(cell.css("padding-left")) + value;
+ var padding = parseInt(cell.css("padding-left"), 10) + value;
cell.css("padding-left", + padding + "px");
@@ -116,7 +116,7 @@
if(node.is(".parent")) {
var cell = $(node.children("td")[options.treeColumn]);
- var padding = parseInt(cell.css("padding-left")) + options.indent;
+ var padding = parseInt(cell.css("padding-left"), 10) + options.indent;
childrenOf(node).each(function() {
$($(this).children("td")[options.treeColumn]).css("padding-left", padding + "px");
treeTable/src/javascripts/jquery.treeTable.js
@@ -29,11 +29,11 @@
color: #fff;
}
-.treeTable tr.collapsed.selected td .expander {
+.treeTable tr.collapsed.selected td .expander, .treeTable tr.collapsed.accept td .expander {
background-image: url(../images/toggle-expand-light.png);
}
-.treeTable tr.expanded.selected td .expander {
+.treeTable tr.expanded.selected td .expander, .treeTable tr.expanded.accept td .expander {
background-image: url(../images/toggle-collapse-light.png);
}
treeTable/src/stylesheets/jquery.treeTable.css
dc6b3cb671a5fa7b4be7b7c9386632098f266fa4
Ludo van den Boom
ludo.vandenboom@cubicphuse.nl
http://github.com/ludo/jquery-plugins/commit/451d0e623bce8f4d0cf311a28278600b252588c5
451d0e623bce8f4d0cf311a28278600b252588c5
2008-11-13T02:40:45-08:00
2008-11-13T02:40:45-08:00
Rewrite documentation to refelect chanes in treeTable 2.0
7cd3db5d53accc3562a748262f18407ea4fde70d
Ludo van den Boom
ludo.vandenboom@cubicphuse.nl