guillaume
/
jOrgChart
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added mechanism for starting off sub-trees collapsed

master
Neil Bowers 2012-01-19 15:48:19 +00:00
parent 97bbe6e0b0
commit 44a9b74d06
3 changed files with 31 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
example/jquery.jOrgChart.js
View File

@ -184,8 +184,8 @@
// Draw the horizontal lines // Draw the horizontal lines
var $linesRow = $("<tr/>"); var $linesRow = $("<tr/>");
$childNodes.each(function() { $childNodes.each(function() {
var $left = $("<td/>").addClass("line left top"); var $left = $("<td>&nbsp;</td>").addClass("line left top");
var $right = $("<td/>").addClass("line right top"); var $right = $("<td>&nbsp;</td>").addClass("line right top");
$linesRow.append($left).append($right); $linesRow.append($left).append($right);
}); });
@ -205,10 +205,15 @@
buildNode($(this), $td, level+1, opts); buildNode($(this), $td, level+1, opts);
$childNodesRow.append($td); $childNodesRow.append($td);
}); });
} }
$tbody.append($childNodesRow); $tbody.append($childNodesRow);
} }
if ($node.hasClass('collapsed')) {
$nodeRow.nextAll('tr').css('display', 'none');
}
$table.append($tbody); $table.append($tbody);
$appendTo.append($table); $appendTo.append($table);
}; };

5
jquery.jOrgChart.js
View File

@ -205,10 +205,15 @@
buildNode($(this), $td, level+1, opts); buildNode($(this), $td, level+1, opts);
$childNodesRow.append($td); $childNodesRow.append($td);
}); });
} }
$tbody.append($childNodesRow); $tbody.append($childNodesRow);
} }
if ($node.hasClass('collapsed')) {
$nodeRow.nextAll('tr').css('display', 'none');
}
$table.append($tbody); $table.append($tbody);
$appendTo.append($table); $appendTo.append($table);
}; };

18
readme.markdown
View File

@ -14,6 +14,7 @@ Features include:
* Showing/hiding a particular branch of the tree by clicking on the respective node. * Showing/hiding a particular branch of the tree by clicking on the respective node.
* Nodes can contain any amount of HTML except `<li>` and `<ul>`. * Nodes can contain any amount of HTML except `<li>` and `<ul>`.
* Easy to style. * Easy to style.
* You can specify that sub-trees should start collapsed, which is useful for very large trees
![jQuery OrgChart](http://i.imgur.com/2OpyG.png "jQuery OrgChart") ![jQuery OrgChart](http://i.imgur.com/2OpyG.png "jQuery OrgChart")
@ -68,6 +69,23 @@ You'll need to construct a nest unordered list that represents your node nesting
</li> </li>
</ul> </ul>
If you want a sub-tree to start off hiden, just add `class="collapsed"` to a list item (`<li>`). That list item will appear, but everything below it won't. For example:
<ul id="org" style="display:none">
<li>Food:
<ul>
<li>Beer</li>
<li class=collapsed>Vegetables
<ul>
<li>Carrot</li>
<li>Pea</li>
</ul>
</li>
<li>Chocolate</li>
</ul>
</li>
</ul>
*Note that you can include any amount of HTML markup in your `<li>` **except** for other `<ul>` or `<li>` elements.* *Note that you can include any amount of HTML markup in your `<li>` **except** for other `<ul>` or `<li>` elements.*