(function($) { $.fn.jOrgChart = function(options) { var opts = $.extend({}, $.fn.jOrgChart.defaults, options); var $appendTo = $(opts.chartElement); return this.each(function() { $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); }); }; $.fn.jOrgChart.defaults = { chartElement : 'body', depth : -1, chartClass : "jOrgChart" }; function buildNode($node, $appendTo, level, opts) { var $table = $(""); var $tbody = $(""); // Construct the node container(s) var $nodeRow = $("").addClass("node-cells"); var $nodeCell = $(""); var $downLineCell = $(""); $childNodes.each(function() { var $left = $(""); $childNodes.each(function() { var $td = $("
").addClass("node-cell").attr("colspan", 2); var $childNodes = $node.children("ul:first").children("li"); 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 $heading = $("

").text(nodeContent); $nodeDiv = $("
").addClass("node").append($nodeContent); // Expand and contract nodes $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.addClass('expanded'); }else{ $this.css('cursor','s-resize'); $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 = $("

").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 = $("
").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"); $linesRow.find("td:last").removeClass("top"); $tbody.append($linesRow); var $childNodesRow = $("
"); $td.attr("colspan", 2); // recurse through children lists and items buildNode($(this), $td, level+1, opts); $childNodesRow.append($td); }); } $tbody.append($childNodesRow); } $table.append($tbody); $appendTo.append($table); }; })(jQuery);