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
parent
cb137b535e
commit
c8b7864250
|
@ -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>
|
||||||
|
|
|
@ -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');
|
||||||
|
|
|
@ -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);
|
||||||
|
@ -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');
|
||||||
|
|
Loading…
Reference in New Issue