").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
+ }else{
+ $nodeDiv = $("
").addClass("node").append($nodeContent);
+ }
+
+ // Expand and contract nodes
+ if ($childNodes.length > 0) {
+ $nodeDiv.click(function() {
+ var $this = $(this);
+ var $tr = $this.closest("tr");
+
+ if($tr.hasClass('contracted')){
+ $this.css('cursor','n-resize');
+ $tr.removeClass('contracted').addClass('expanded');
+ $tr.nextAll("tr").css('visibility', '');
+ }else{
+ $this.css('cursor','s-resize');
+ $tr.removeClass('expanded').addClass('contracted');
+ $tr.nextAll("tr").css('visibility', 'hidden');
+ }
+ });
+ }
+
+ $nodeCell.append($nodeDiv);
+ $nodeRow.append($nodeCell);
+ $tbody.append($nodeRow);
+
+ if($childNodes.length > 0) {
+ // if it can be expanded then change the cursor
+ $nodeDiv.css('cursor','n-resize').addClass('expanded');
+
+ // recurse until leaves found (-1) or to the level specified
+ if(opts.depth == -1 || (level+1 < opts.depth)) {
+ var $downLineRow = $("
|
");
+ var $downLineCell = $("
| ").attr("colspan", $childNodes.length*2);
+ $downLineRow.append($downLineCell);
+
+ // draw the connecting line from the parent node to the horizontal line
+ $downLine = $("
").addClass("line down");
+ $downLineCell.append($downLine);
+ $tbody.append($downLineRow);
+
+ // Draw the horizontal lines
+ var $linesRow = $("
|
");
+ $childNodes.each(function() {
+ var $left = $("
| ").addClass("line left top");
+ var $right = $("
| ").addClass("line right top");
+ $linesRow.append($left).append($right);
+ });
+
+ // horizontal line shouldn't extend beyond the first and last child branches
+ $linesRow.find("td:first")
+ .removeClass("top")
+ .end()
+ .find("td:last")
+ .removeClass("top");
+
+ $tbody.append($linesRow);
+ var $childNodesRow = $("
|
");
+ $childNodes.each(function() {
+ var $td = $("
| ");
+ $td.attr("colspan", 2);
+ // recurse through children lists and items
+ buildNode($(this), $td, level+1, opts);
+ $childNodesRow.append($td);
+ });
+
+ }
+ $tbody.append($childNodesRow);
+ }
+
+ // 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.removeClass('expanded');
$nodeRow.addClass('contracted');
$nodeDiv.css('cursor','s-resize');
- } else {
- $nodeDiv.addClass(item);
- }
- });
- }
+ } else {
+ $nodeDiv.addClass(item);
+ }
+ });
+ }
- $table.append($tbody);
- $appendTo.append($table);
- };
+ $table.append($tbody);
+ $appendTo.append($table);
+ };
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js
index dc88db9..10cf348 100644
--- a/jquery.jOrgChart.js
+++ b/jquery.jOrgChart.js
@@ -1,87 +1,85 @@
/**
-* jQuery org-chart/tree plugin.
-*
-* Author: Wes Nolte
-* http://twitter.com/wesnolte
-*
-* Based on the work of Mark Lee
-* http://www.capricasoftware.co.uk
-*
-* ID implementation fixed by Adrian Hinz
-*
-* This software is licensed under the Creative Commons Attribution-ShareAlike
-* 3.0 License.
-*
-* See here for license terms:
-* http://creativecommons.org/licenses/by-sa/3.0
-*/
+ * jQuery org-chart/tree plugin.
+ *
+ * Author: Wes Nolte
+ * http://twitter.com/wesnolte
+ *
+ * Based on the work of Mark Lee
+ * http://www.capricasoftware.co.uk
+ *
+ * This software is licensed under the Creative Commons Attribution-ShareAlike
+ * 3.0 License.
+ *
+ * See here for license terms:
+ * http://creativecommons.org/licenses/by-sa/3.0
+ */
(function($) {
- $.fn.jOrgChart = function(options) {
- var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
- var $appendTo = $(opts.chartElement);
+ $.fn.jOrgChart = function(options) {
+ var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
+ var $appendTo = $(opts.chartElement);
- // build the tree
- $this = $(this);
- var $container = $("
");
- if($this.is("ul")) {
- buildNode($this.find("li:first"), $container, 0, opts);
- }
- else if($this.is("li")) {
- buildNode($this, $container, 0, opts);
- }
- $appendTo.append($container);
+ // build the tree
+ $this = $(this);
+ var $container = $("
");
+ if($this.is("ul")) {
+ buildNode($this.find("li:first"), $container, 0, opts);
+ }
+ else if($this.is("li")) {
+ buildNode($this, $container, 0, opts);
+ }
+ $appendTo.append($container);
- // add drag and drop if enabled
- if(opts.dragAndDrop){
- $('div.node').draggable({
- cursor : 'move',
- distance : 40,
- helper : 'clone',
- opacity : 0.8,
- revert : true,
- revertDuration : 100,
- snap : 'div.node.expanded',
- snapMode : 'inner',
- stack : 'div.node'
- });
+ // add drag and drop if enabled
+ if(opts.dragAndDrop){
+ $('div.node').draggable({
+ cursor : 'move',
+ distance : 40,
+ helper : 'clone',
+ opacity : 0.8,
+ revert : true,
+ revertDuration : 100,
+ snap : 'div.node.expanded',
+ snapMode : 'inner',
+ stack : 'div.node'
+ });
+
+ $('div.node').droppable({
+ accept : '.node',
+ activeClass : 'drag-active',
+ hoverClass : 'drop-hover'
+ });
+
+ // Drag start event handler for nodes
+ $('div.node').bind("dragstart", function handleDragStart( event, ui ){
+
+ var sourceNode = $(this);
+ sourceNode.parentsUntil('.node-container')
+ .find('*')
+ .filter('.node')
+ .droppable('disable');
+ });
- $('div.node').droppable({
- accept : '.node',
- activeClass : 'drag-active',
- hoverClass : 'drop-hover'
- });
+ // Drag stop event handler for nodes
+ $('div.node').bind("dragstop", function handleDragStop( event, ui ){
- // Drag start event handler for nodes
- $('div.node').bind("dragstart", function handleDragStart( event, ui ){
-
- var sourceNode = $(this);
- sourceNode.parentsUntil('.node-container')
- .find('*')
- .filter('.node')
- .droppable('disable');
- });
-
- // Drag stop event handler for nodes
- $('div.node').bind("dragstop", function handleDragStop( event, ui ){
-
- /* reload the plugin */
- $(opts.chartElement).children().remove();
- $this.jOrgChart(opts);
- });
-
- // Drop event handler for nodes
- $('div.node').bind("drop", function handleDropEvent( event, ui ) {
- var sourceNode = ui.draggable;
- var targetNode = $(this);
-
- // finding nodes based on plaintext and html
- // content is hard!
- var targetLi = $('li').filter(function(){
-
- li = $(this).clone()
- .children("ul,li")
- .remove()
+ /* reload the plugin */
+ $(opts.chartElement).children().remove();
+ $this.jOrgChart(opts);
+ });
+
+ // Drop event handler for nodes
+ $('div.node').bind("drop", function handleDropEvent( event, ui ) {
+ var sourceNode = ui.draggable;
+ var targetNode = $(this);
+
+ // finding nodes based on plaintext and html
+ // content is hard!
+ var targetLi = $('li').filter(function(){
+
+ li = $(this).clone()
+ .children("ul,li")
+ .remove()
.end();
var attr = li.attr('id');
if (typeof attr !== 'undefined' && attr !== false) {
@@ -90,14 +88,14 @@
else {
return li.html() == targetNode.html();
}
-
- });
-
- var sourceLi = $('li').filter(function(){
-
- li = $(this).clone()
- .children("ul,li")
- .remove()
+
+ });
+
+ var sourceLi = $('li').filter(function(){
+
+ li = $(this).clone()
+ .children("ul,li")
+ .remove()
.end();
var attr = li.attr('id');
if (typeof attr !== 'undefined' && attr !== false) {
@@ -106,162 +104,161 @@
else {
return li.html() == sourceNode.html();
}
-
- });
-
- var sourceliClone = sourceLi.clone();
- var sourceUl = sourceLi.parent('ul');
-
- if(sourceUl.children('li').size() > 1){
- sourceLi.remove();
- }else{
- sourceUl.remove();
- }
-
- var id = sourceLi.attr("id");
-
- if(targetLi.children('ul').size() >0){
- if (typeof id !== 'undefined' && id !== false) {
- targetLi.children('ul').append('
'+sourceliClone.html()+'');
- }else{
- targetLi.children('ul').append('
'+sourceliClone.html()+'');
- }
- }else{
- if (typeof id !== 'undefined' && id !== false) {
- targetLi.append('
');
- }else{
- targetLi.append('
');
- }
- }
-
- }); // handleDropEvent
-
- } // Drag and drop
- };
-
- // Option defaults
- $.fn.jOrgChart.defaults = {
- chartElement : 'body',
- depth : -1,
- chartClass : "jOrgChart",
- dragAndDrop: false
- };
-
- // Method that recursively builds the tree
- function buildNode($node, $appendTo, level, opts) {
-
- var $table = $("
");
- var $tbody = $("
");
-
- // Construct the node container(s)
- var $nodeRow = $("
|
").addClass("node-cells");
- var $nodeCell = $("
| ").addClass("node-cell").attr("colspan", 2);
- var $childNodes = $node.children("ul:first").children("li");
- var $nodeDiv;
-
- if($childNodes.length > 1) {
- $nodeCell.attr("colspan", $childNodes.length * 2);
- }
- // Draw the node
- // Get the contents - any markup except li and ul allowed
- var $nodeContent = $node.clone()
- .children("ul,li")
- .remove()
- .end()
- .html();
-
- var new_node_id = $node.attr("id")
- if (typeof new_node_id !== 'undefined' && new_node_id !== false) {
- $nodeDiv = $("
").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
- }else{
- $nodeDiv = $("
").addClass("node").append($nodeContent);
- }
-
- // Expand and contract nodes
- if ($childNodes.length > 0) {
- $nodeDiv.click(function() {
- var $this = $(this);
- var $tr = $this.closest("tr");
- $tr.nextAll("tr").fadeToggle("fast");
-
- if($tr.hasClass('contracted')){
- $this.css('cursor','n-resize');
- $tr.removeClass('contracted');
- $tr.addClass('expanded');
- }else{
- $this.css('cursor','s-resize');
- $tr.removeClass('expanded');
- $tr.addClass('contracted');
- }
- });
- }
-
- $nodeCell.append($nodeDiv);
- $nodeRow.append($nodeCell);
- $tbody.append($nodeRow);
-
- if($childNodes.length > 0) {
- // if it can be expanded then change the cursor
- $nodeDiv.css('cursor','n-resize').addClass('expanded');
-
- // recurse until leaves found (-1) or to the level specified
- if(opts.depth == -1 || (level+1 < opts.depth)) {
- var $downLineRow = $("
|
");
- var $downLineCell = $("
| ").attr("colspan", $childNodes.length*2);
- $downLineRow.append($downLineCell);
+
+ });
- // draw the connecting line from the parent node to the horizontal line
- $downLine = $("
").addClass("line down");
- $downLineCell.append($downLine);
- $tbody.append($downLineRow);
-
- // Draw the horizontal lines
- var $linesRow = $("
|
");
- $childNodes.each(function() {
- var $left = $("
| ").addClass("line left top");
- var $right = $("
| ").addClass("line right top");
- $linesRow.append($left).append($right);
- });
-
- // horizontal line shouldn't extend beyond the first and last child branches
- $linesRow.find("td:first")
- .removeClass("top")
- .end()
- .find("td:last")
- .removeClass("top");
-
- $tbody.append($linesRow);
- var $childNodesRow = $("
|
");
- $childNodes.each(function() {
- var $td = $("
| ");
- $td.attr("colspan", 2);
- // recurse through children lists and items
- buildNode($(this), $td, level+1, opts);
- $childNodesRow.append($td);
- });
-
- }
- $tbody.append($childNodesRow);
+ var sourceliClone = sourceLi.clone();
+ var sourceUl = sourceLi.parent('ul');
+
+ if(sourceUl.children('li').size() > 1){
+ sourceLi.remove();
+ }else{
+ sourceUl.remove();
}
+
+ var id = sourceLi.attr("id");
- // 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');
+ if(targetLi.children('ul').size() >0){
+ if (typeof id !== 'undefined' && id !== false) {
+ targetLi.children('ul').append('
'+sourceliClone.html()+'');
+ }else{
+ targetLi.children('ul').append('
'+sourceliClone.html()+'');
+ }
+ }else{
+ if (typeof id !== 'undefined' && id !== false) {
+ targetLi.append('
');
+ }else{
+ targetLi.append('
');
+ }
+ }
+
+ }); // handleDropEvent
+
+ } // Drag and drop
+ };
+
+ // Option defaults
+ $.fn.jOrgChart.defaults = {
+ chartElement : 'body',
+ depth : -1,
+ chartClass : "jOrgChart",
+ dragAndDrop: false
+ };
+
+ // Method that recursively builds the tree
+ function buildNode($node, $appendTo, level, opts) {
+
+ var $table = $("
");
+ var $tbody = $("
");
+
+ // Construct the node container(s)
+ var $nodeRow = $("
|
").addClass("node-cells");
+ var $nodeCell = $("
| ").addClass("node-cell").attr("colspan", 2);
+ var $childNodes = $node.children("ul:first").children("li");
+ var $nodeDiv;
+
+ if($childNodes.length > 1) {
+ $nodeCell.attr("colspan", $childNodes.length * 2);
+ }
+ // Draw the node
+ // Get the contents - any markup except li and ul allowed
+ var $nodeContent = $node.clone()
+ .children("ul,li")
+ .remove()
+ .end()
+ .html();
+
+ var new_node_id = $node.attr("id")
+ if (typeof new_node_id !== 'undefined' && new_node_id !== false) {
+ $nodeDiv = $("
").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
+ }else{
+ $nodeDiv = $("
").addClass("node").append($nodeContent);
+ }
+
+ // Expand and contract nodes
+ if ($childNodes.length > 0) {
+ $nodeDiv.click(function() {
+ var $this = $(this);
+ var $tr = $this.closest("tr");
+
+ if($tr.hasClass('contracted')){
+ $this.css('cursor','n-resize');
+ $tr.removeClass('contracted').addClass('expanded');
+ $tr.nextAll("tr").css('visibility', '');
+ }else{
+ $this.css('cursor','s-resize');
+ $tr.removeClass('expanded').addClass('contracted');
+ $tr.nextAll("tr").css('visibility', 'hidden');
+ }
+ });
+ }
+
+ $nodeCell.append($nodeDiv);
+ $nodeRow.append($nodeCell);
+ $tbody.append($nodeRow);
+
+ if($childNodes.length > 0) {
+ // if it can be expanded then change the cursor
+ $nodeDiv.css('cursor','n-resize').addClass('expanded');
+
+ // recurse until leaves found (-1) or to the level specified
+ if(opts.depth == -1 || (level+1 < opts.depth)) {
+ var $downLineRow = $("
|
");
+ var $downLineCell = $("
| ").attr("colspan", $childNodes.length*2);
+ $downLineRow.append($downLineCell);
+
+ // draw the connecting line from the parent node to the horizontal line
+ $downLine = $("
").addClass("line down");
+ $downLineCell.append($downLine);
+ $tbody.append($downLineRow);
+
+ // Draw the horizontal lines
+ var $linesRow = $("
|
");
+ $childNodes.each(function() {
+ var $left = $("
| ").addClass("line left top");
+ var $right = $("
| ").addClass("line right top");
+ $linesRow.append($left).append($right);
+ });
+
+ // horizontal line shouldn't extend beyond the first and last child branches
+ $linesRow.find("td:first")
+ .removeClass("top")
+ .end()
+ .find("td:last")
+ .removeClass("top");
+
+ $tbody.append($linesRow);
+ var $childNodesRow = $("
|
");
+ $childNodes.each(function() {
+ var $td = $("
| ");
+ $td.attr("colspan", 2);
+ // recurse through children lists and items
+ buildNode($(this), $td, level+1, opts);
+ $childNodesRow.append($td);
+ });
+
+ }
+ $tbody.append($childNodesRow);
+ }
+
+ // 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.removeClass('expanded');
$nodeRow.addClass('contracted');
$nodeDiv.css('cursor','s-resize');
- } else {
- $nodeDiv.addClass(item);
- }
- });
- }
+ } else {
+ $nodeDiv.addClass(item);
+ }
+ });
+ }
- $table.append($tbody);
- $appendTo.append($table);
- };
+ $table.append($tbody);
+ $appendTo.append($table);
+ };
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/readme.markdown b/readme.markdown
index 01f8fc7..824b38a 100644
--- a/readme.markdown
+++ b/readme.markdown
@@ -16,7 +16,7 @@ Features include:
* Easy to style.
* You can specify that sub-trees should start collapsed, which is useful for very large trees
-
+
----