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

Bug fixes: 1. Removed the unnecessary assignment of a style class to nodes. 2. li elements who have a class of 'collapsed' are now working correctly and the nodes that represent them maintain the correct state across drag-n-drop

master
Wes 2012-05-07 13:38:37 +01:00
parent cb137b535e
commit c8b7864250
3 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/example.html
View File

@ -75,7 +75,7 @@
</ul> </ul>
</li> </li>
<li>Bread</li> <li>Bread</li>
<li>Chocolate <li class="collapsed">Chocolate
<ul> <ul>
<li>Topdeck</li> <li>Topdeck</li>
<li>Reese's Cups</li> <li>Reese's Cups</li>

31
example/jquery.jOrgChart.js
View File

@ -78,15 +78,15 @@
var sourceUl = sourceLi.parent('ul'); var sourceUl = sourceLi.parent('ul');
if (targetUl.length > 0){ if (targetUl.length > 0){
targetUl.append(sourceLi); targetUl.append(sourceLi);
} else { } else {
targetLi.append("<ul></ul>"); targetLi.append("<ul></ul>");
targetLi.children('ul').append(sourceLi); targetLi.children('ul').append(sourceLi);
} }
//Removes any empty lists //Removes any empty lists
if (sourceUl.children().length === 0){ if (sourceUl.children().length === 0){
sourceUl.remove(); sourceUl.remove();
} }
}); // handleDropEvent }); // handleDropEvent
@ -125,12 +125,12 @@
.end() .end()
.html(); .html();
//Increaments the node count which is used to link the source list and the org chart //Increaments the node count which is used to link the source list and the org chart
nodeCount++; nodeCount++;
$node.data("tree-node", nodeCount); $node.data("tree-node", nodeCount);
$nodeDiv = $("<div>").addClass("node") $nodeDiv = $("<div>").addClass("node")
.data("tree-node", nodeCount) .data("tree-node", nodeCount)
.append($nodeContent); .append($nodeContent);
// Expand and contract nodes // Expand and contract nodes
if ($childNodes.length > 0) { if ($childNodes.length > 0) {
@ -142,10 +142,16 @@
$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('visibility', '');
// Update the <li> appropriately so that if the tree redraws collapsed/non-collapsed nodes
// maintain their appearance
$node.removeClass('collapsed');
}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'); $tr.nextAll("tr").css('visibility', 'hidden');
$node.addClass('collapsed');
} }
}); });
} }
@ -156,7 +162,7 @@
if($childNodes.length > 0) { if($childNodes.length > 0) {
// if it can be expanded then change the cursor // if it can be expanded then change the cursor
$nodeDiv.css('cursor','n-resize').addClass('expanded'); $nodeDiv.css('cursor','n-resize');
// recurse until leaves found (-1) or to the level specified // recurse until leaves found (-1) or to the level specified
if(opts.depth == -1 || (level+1 < opts.depth)) { if(opts.depth == -1 || (level+1 < opts.depth)) {
@ -204,7 +210,8 @@
var classList = $node.attr('class').split(/\s+/); var classList = $node.attr('class').split(/\s+/);
$.each(classList, function(index,item) { $.each(classList, function(index,item) {
if (item == 'collapsed') { if (item == 'collapsed') {
$nodeRow.nextAll('tr').css('display', 'none'); console.log($node);
$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');

49
jquery.jOrgChart.js
View File

@ -18,7 +18,7 @@
var $appendTo = $(opts.chartElement); var $appendTo = $(opts.chartElement);
// build the tree // build the tree
var $this = $(this); $this = $(this);
var $container = $("<div class='" + opts.chartClass + "'/>"); var $container = $("<div class='" + opts.chartClass + "'/>");
if($this.is("ul")) { if($this.is("ul")) {
buildNode($this.find("li:first"), $container, 0, opts); buildNode($this.find("li:first"), $container, 0, opts);
@ -68,27 +68,27 @@
// Drop event handler for nodes // Drop event handler for nodes
$('div.node').bind("drop", function handleDropEvent( event, ui ) { $('div.node').bind("drop", function handleDropEvent( event, ui ) {
var targetID = $(this).data("tree-node"); var targetID = $(this).data("tree-node");
var targetLi = $this.find("li").filter(function() { return $(this).data("tree-node") === targetID; } ); var targetLi = $this.find("li").filter(function() { return $(this).data("tree-node") === targetID; } );
var targetUl = targetLi.children('ul'); var targetUl = targetLi.children('ul');
var sourceID = ui.draggable.data("tree-node"); var sourceID = ui.draggable.data("tree-node");
var sourceLi = $this.find("li").filter(function() { return $(this).data("tree-node") === sourceID; } ); var sourceLi = $this.find("li").filter(function() { return $(this).data("tree-node") === sourceID; } );
var sourceUl = sourceLi.parent('ul'); var sourceUl = sourceLi.parent('ul');
if (targetUl.length > 0){ if (targetUl.length > 0){
targetUl.append(sourceLi); targetUl.append(sourceLi);
} else { } else {
targetLi.append("<ul></ul>"); targetLi.append("<ul></ul>");
targetLi.children('ul').append(sourceLi); targetLi.children('ul').append(sourceLi);
} }
//Removes any empty lists //Removes any empty lists
if (sourceUl.children().length === 0){ if (sourceUl.children().length === 0){
sourceUl.remove(); sourceUl.remove();
} }
}); // handleDropEvent }); // handleDropEvent
} // Drag and drop } // Drag and drop
@ -101,7 +101,7 @@
chartClass : "jOrgChart", chartClass : "jOrgChart",
dragAndDrop: false dragAndDrop: false
}; };
var nodeCount = 0; var nodeCount = 0;
// Method that recursively builds the tree // Method that recursively builds the tree
function buildNode($node, $appendTo, level, opts) { function buildNode($node, $appendTo, level, opts) {
@ -124,13 +124,13 @@
.remove() .remove()
.end() .end()
.html(); .html();
//Increaments the node count which is used to link the source list and the org chart //Increaments the node count which is used to link the source list and the org chart
nodeCount++; nodeCount++;
$node.data("tree-node", nodeCount); $node.data("tree-node", nodeCount);
$nodeDiv = $("<div>").addClass("node") $nodeDiv = $("<div>").addClass("node")
.data("tree-node", nodeCount) .data("tree-node", nodeCount)
.append($nodeContent); .append($nodeContent);
// Expand and contract nodes // Expand and contract nodes
if ($childNodes.length > 0) { if ($childNodes.length > 0) {
@ -142,10 +142,16 @@
$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('visibility', '');
// Update the <li> appropriately so that if the tree redraws collapsed/non-collapsed nodes
// maintain their appearance
$node.removeClass('collapsed');
}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'); $tr.nextAll("tr").css('visibility', 'hidden');
$node.addClass('collapsed');
} }
}); });
} }
@ -156,7 +162,7 @@
if($childNodes.length > 0) { if($childNodes.length > 0) {
// if it can be expanded then change the cursor // if it can be expanded then change the cursor
$nodeDiv.css('cursor','n-resize').addClass('expanded'); $nodeDiv.css('cursor','n-resize');
// recurse until leaves found (-1) or to the level specified // recurse until leaves found (-1) or to the level specified
if(opts.depth == -1 || (level+1 < opts.depth)) { if(opts.depth == -1 || (level+1 < opts.depth)) {
@ -165,7 +171,7 @@
$downLineRow.append($downLineCell); $downLineRow.append($downLineCell);
// draw the connecting line from the parent node to the horizontal line // draw the connecting line from the parent node to the horizontal line
var $downLine = $("<div></div>").addClass("line down"); $downLine = $("<div></div>").addClass("line down");
$downLineCell.append($downLine); $downLineCell.append($downLine);
$tbody.append($downLineRow); $tbody.append($downLineRow);
@ -204,7 +210,8 @@
var classList = $node.attr('class').split(/\s+/); var classList = $node.attr('class').split(/\s+/);
$.each(classList, function(index,item) { $.each(classList, function(index,item) {
if (item == 'collapsed') { if (item == 'collapsed') {
$nodeRow.nextAll('tr').css('display', 'none'); console.log($node);
$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');