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

Merge pull request #3 from neilbowers/master 

Space apart sibling nodes; propagate classes from <li> to nodes
master
Wes 2012-01-21 08:01:54 -08:00
parent 4f4d2a917f 01521d4aab
commit c1e1ee3135
3 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,6 +36,7 @@
width : 96px; width : 96px;
height : 60px; height : 60px;
z-index : 10; z-index : 10;
margin: : 0 2px;
} }
/* jQuery drag 'n drop */ /* jQuery drag 'n drop */

14
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
$nodeRow.nextAll('tr').css('display', 'none'); // 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');
} else {
$nodeDiv.addClass(item);
}
});
} }
$table.append($tbody); $table.append($tbody);

4
readme.markdown
View File

@ -69,7 +69,7 @@ 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: If you want a sub-tree to start off hidden, 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"> <ul id="org" style="display:none">
<li>Food: <li>Food:
@ -86,7 +86,7 @@ If you want a sub-tree to start off hiden, just add `class="collapsed"` to a lis
</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.
----- -----