Add an option to ignore space used by collapsed nodes

my-master
Guillaume DOTT 2013-01-25 14:57:37 +01:00
parent 4b6a366c8e
commit 73c54de383
2 changed files with 9 additions and 5 deletions

View File

@ -99,7 +99,8 @@
chartElement : 'body', chartElement : 'body',
depth : -1, depth : -1,
chartClass : "jOrgChart", chartClass : "jOrgChart",
dragAndDrop: false dragAndDrop: false,
ignoreSpace: false
}; };
function buildNodes($list, $appendTo, opts) { function buildNodes($list, $appendTo, opts) {
@ -160,7 +161,7 @@
if($tr.hasClass('contracted')){ if($tr.hasClass('contracted')){
$this.css('cursor','n-resize'); $this.css('cursor','n-resize');
$tr.removeClass('contracted').addClass('expanded'); $tr.removeClass('contracted').addClass('expanded');
$tr.nextAll("tr").css('visibility', ''); $tr.nextAll("tr").css(opts.ignoreSpace ? 'display' : 'visibility', '');
// Update the <li> appropriately so that if the tree redraws collapsed/non-collapsed nodes // Update the <li> appropriately so that if the tree redraws collapsed/non-collapsed nodes
// maintain their appearance // maintain their appearance
@ -168,7 +169,8 @@
}else{ }else{
$this.css('cursor','s-resize'); $this.css('cursor','s-resize');
$tr.removeClass('expanded').addClass('contracted'); $tr.removeClass('expanded').addClass('contracted');
$tr.nextAll("tr").css('visibility', 'hidden'); if(opts.ignoreSpace) { $tr.nextAll("tr").css('display', 'none'); }
else { $tr.nextAll("tr").css('visibility', 'hidden'); }
$node.addClass('collapsed'); $node.addClass('collapsed');
} }
@ -230,7 +232,8 @@
$.each(classList, function(index,item) { $.each(classList, function(index,item) {
if (item == 'collapsed') { if (item == 'collapsed') {
console.log($node); console.log($node);
$nodeRow.nextAll('tr').css('visibility', 'hidden'); if(opts.ignoreSpace) { $nodeRow.nextAll('tr').css('display', 'none'); }
else { $nodeRow.nextAll('tr').css('visibility', 'hidden'); }
$nodeRow.removeClass('expanded'); $nodeRow.removeClass('expanded');
$nodeRow.addClass('contracted'); $nodeRow.addClass('contracted');
$nodeDiv.css('cursor','s-resize'); $nodeDiv.css('cursor','s-resize');

View File

@ -117,9 +117,10 @@ Source code with an example is available [here](https://github.com/wesnolte/jOrg
##Configuration ##Configuration
There are only 3 configuration options. There are only 5 configuration options.
1. **chartElement** - used to specify which HTML element you'd like to append the OrgChart markup to. *[default='body']* 1. **chartElement** - used to specify which HTML element you'd like to append the OrgChart markup to. *[default='body']*
2. **depth** - tells the code what depth to parse to. The default value of "-1" instructs it to parse like it's 1999. *[default=-1]* 2. **depth** - tells the code what depth to parse to. The default value of "-1" instructs it to parse like it's 1999. *[default=-1]*
3. **chartClass** - the name of the style class that is assigned to the generated markup. *[default='jOrgChart']* 3. **chartClass** - the name of the style class that is assigned to the generated markup. *[default='jOrgChart']*
4. **dragAndDrop** - determines whether the drag-and-drop feature of tree node elements is enabled. *[default=false]* 4. **dragAndDrop** - determines whether the drag-and-drop feature of tree node elements is enabled. *[default=false]*
5. **ignoreSpace** - if true, no space is used by collapsed nodes. if false, the width and height of the graph stays the same when collapsing nodes. *[default=false]*