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

Merge pull request #2 from neilbowers/master 

Improvement in layout, IE7 fix, and collapsed sub-trees
master
Wes 2012-01-19 08:44:58 -08:00
parent beba805557 44a9b74d06
commit 4f4d2a917f
4 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/css/jquery.jOrgChart.css
View File

@ -26,7 +26,7 @@
.jOrgChart td {
text-align : center;
vertical-align : top;
padding : 0px 2px;
padding : 0;
}
/* The node */

11
example/jquery.jOrgChart.js
View File

@ -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);
};

9
jquery.jOrgChart.js
View File

@ -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);
};

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.
* 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.*