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

Any classes you add to the <li> elements now get propagated to the node <div> elements

master
Neil Bowers 2012-01-20 13:37:41 +00:00
parent b95942c6c5
commit 4b6b66a8ab
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
jquery.jOrgChart.js
View File

@ -133,6 +133,7 @@
var $nodeRow = $("<tr/>").addClass("node-cells"); var $nodeRow = $("<tr/>").addClass("node-cells");
var $nodeCell = $("<td/>").addClass("node-cell").attr("colspan", 2); var $nodeCell = $("<td/>").addClass("node-cell").attr("colspan", 2);
var $childNodes = $node.children("ul:first").children("li"); var $childNodes = $node.children("ul:first").children("li");
var $nodeDiv;
if($childNodes.length > 1) { if($childNodes.length > 1) {
$nodeCell.attr("colspan", $childNodes.length * 2); $nodeCell.attr("colspan", $childNodes.length * 2);
@ -210,8 +211,17 @@
$tbody.append($childNodesRow); $tbody.append($childNodesRow);
} }
if ($node.hasClass('collapsed')) { // any classes on the LI element get copied to the relevant node in the tree
// apart from the special 'collapsed' class, which collapses the sub-tree at this point
if ($node.attr('class') != undefined) {
var classList = $node.attr('class').split(/\s+/);
$.each(classList, function(index,item) {
if (item == 'collapsed') {
$nodeRow.nextAll('tr').css('display', 'none'); $nodeRow.nextAll('tr').css('display', 'none');
} else {
$nodeDiv.addClass(item);
}
});
} }
$table.append($tbody); $table.append($tbody);

2
readme.markdown
View File

@ -86,7 +86,7 @@ If you want a sub-tree to start off hidden, just add `class="collapsed"` to a li
</li> </li>
</ul> </ul>
*Note that you can include any amount of HTML markup in your `<li>` **except** for other `<ul>` or `<li>` elements.* This plugin works by generating the tree as a series of nested tables. Each node in the tree is represented with `<div class="node">`. You can include any amount of HTML markup in your `<li>` **except** for other `<ul>` or `<li>` elements. Your markup will be used within the node's `<div>` element. Any classes you attach to the `<li>` elements will be copied to the associated node, allowing you to highlight particular parts of the tree. The special `collapsed` class described above doesn't get copied to the node.
----- -----