From 914e7f2636417b64663fccabe98f2352d5e8e74d Mon Sep 17 00:00:00 2001 From: Neil Bowers Date: Thu, 19 Jan 2012 15:08:18 +0000 Subject: [PATCH 1/3] Removed padding from the sides of cells, as it was causing larger tables to get mis-aligned. Every sub-tree pushed things off by one pixel. With a deep tree, you end up with lines not meeting nodes. This fixes it. --- example/css/jquery.jOrgChart.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/css/jquery.jOrgChart.css b/example/css/jquery.jOrgChart.css index f5c62ac..7c0c248 100644 --- a/example/css/jquery.jOrgChart.css +++ b/example/css/jquery.jOrgChart.css @@ -26,7 +26,7 @@ .jOrgChart td { text-align : center; vertical-align : top; - padding : 0px 2px; + padding : 0; } /* The node */ From 97bbe6e0b0f9d26edea00e13795e17ff03e6d151 Mon Sep 17 00:00:00 2001 From: Neil Bowers Date: Thu, 19 Jan 2012 15:15:26 +0000 Subject: [PATCH 2/3] fix for IE7: horizontal lines don't appear unless you put a non-breaking space inside the relevant TD elements. Still works fine on Safari, Chrome, IE8&9, Firefox, and Camino --- jquery.jOrgChart.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js index da4ec0f..736c30b 100644 --- a/jquery.jOrgChart.js +++ b/jquery.jOrgChart.js @@ -184,8 +184,8 @@ // Draw the horizontal lines var $linesRow = $(""); $childNodes.each(function() { - var $left = $("").addClass("line left top"); - var $right = $("").addClass("line right top"); + var $left = $(" ").addClass("line left top"); + var $right = $(" ").addClass("line right top"); $linesRow.append($left).append($right); }); From 44a9b74d06d734948d0ef7c1a02128cb46d0c524 Mon Sep 17 00:00:00 2001 From: Neil Bowers Date: Thu, 19 Jan 2012 15:48:19 +0000 Subject: [PATCH 3/3] Added mechanism for starting off sub-trees collapsed --- example/jquery.jOrgChart.js | 11 ++++++++--- jquery.jOrgChart.js | 5 +++++ readme.markdown | 18 ++++++++++++++++++ 3 files changed, 31 insertions(+), 3 deletions(-) diff --git a/example/jquery.jOrgChart.js b/example/jquery.jOrgChart.js index 1b97c02..f1df0cb 100644 --- a/example/jquery.jOrgChart.js +++ b/example/jquery.jOrgChart.js @@ -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 = $(""); $childNodes.each(function() { - var $left = $("").addClass("line left top"); - var $right = $("").addClass("line right top"); + var $left = $(" ").addClass("line left top"); + var $right = $(" ").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); }; diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js index 736c30b..f1df0cb 100644 --- a/jquery.jOrgChart.js +++ b/jquery.jOrgChart.js @@ -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); }; diff --git a/readme.markdown b/readme.markdown index fa9a6c4..015dec6 100644 --- a/readme.markdown +++ b/readme.markdown @@ -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 `
  • ` and `
      `. * 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
    +If you want a sub-tree to start off hiden, just add `class="collapsed"` to a list item (`
  • `). That list item will appear, but everything below it won't. For example: + + + *Note that you can include any amount of HTML markup in your `
  • ` **except** for other `
      ` or `
    • ` elements.*