Permalink
Browse files

Merge pull request #2 from neilbowers/master

Improvement in layout, IE7 fix, and collapsed sub-trees
  • Loading branch information...
2 parents beba805 + 44a9b74 commit 4f4d2a917fe0c8a97fe8b19acf9b50aaccfe1ce2 @wesnolte committed Jan 19, 2012
Showing with 34 additions and 6 deletions.
  1. +1 −1 example/css/jquery.jOrgChart.css
  2. +8 −3 example/jquery.jOrgChart.js
  3. +7 −2 jquery.jOrgChart.js
  4. +18 −0 readme.markdown
@@ -26,7 +26,7 @@
.jOrgChart td {
text-align : center;
vertical-align : top;
- padding : 0px 2px;
+ padding : 0;
}
/* The node */
@@ -17,7 +17,7 @@
$.fn.jOrgChart = function(options) {
var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
- var $appendTo = $(opts.chartElement);
+ var $appendTo = $(opts.chartElement);
// build the tree
$this = $(this);
@@ -184,8 +184,8 @@
// Draw the horizontal lines
var $linesRow = $("<tr/>");
$childNodes.each(function() {
- var $left = $("<td/>").addClass("line left top");
- var $right = $("<td/>").addClass("line right top");
+ var $left = $("<td>&nbsp;</td>").addClass("line left top");
+ var $right = $("<td>&nbsp;</td>").addClass("line right top");
$linesRow.append($left).append($right);
});
@@ -205,10 +205,15 @@
buildNode($(this), $td, level+1, opts);
$childNodesRow.append($td);
});
+
}
$tbody.append($childNodesRow);
}
+ if ($node.hasClass('collapsed')) {
+ $nodeRow.nextAll('tr').css('display', 'none');
+ }
+
$table.append($tbody);
$appendTo.append($table);
};
View
@@ -184,8 +184,8 @@
// Draw the horizontal lines
var $linesRow = $("<tr/>");
$childNodes.each(function() {
- var $left = $("<td/>").addClass("line left top");
- var $right = $("<td/>").addClass("line right top");
+ var $left = $("<td>&nbsp;</td>").addClass("line left top");
+ var $right = $("<td>&nbsp;</td>").addClass("line right top");
$linesRow.append($left).append($right);
});
@@ -205,10 +205,15 @@
buildNode($(this), $td, level+1, opts);
$childNodesRow.append($td);
});
+
}
$tbody.append($childNodesRow);
}
+ if ($node.hasClass('collapsed')) {
+ $nodeRow.nextAll('tr').css('display', 'none');
+ }
+
$table.append($tbody);
$appendTo.append($table);
};
View
@@ -14,6 +14,7 @@ Features include:
* 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>`.
* 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")
@@ -68,6 +69,23 @@ You'll need to construct a nest unordered list that represents your node nesting
</li>
</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.*

0 comments on commit 4f4d2a9

Please sign in to comment.