Improved the way nodes without IDs are handled using data- attributes instead of searching on html/plain text
Jonathon Smith
parent
ddfc594332
commit
f1432f80d2
|
|
@ -35,7 +35,7 @@
|
||||||
distance : 40,
|
distance : 40,
|
||||||
helper : 'clone',
|
helper : 'clone',
|
||||||
opacity : 0.8,
|
opacity : 0.8,
|
||||||
revert : true,
|
revert : 'invalid',
|
||||||
revertDuration : 100,
|
revertDuration : 100,
|
||||||
snap : 'div.node.expanded',
|
snap : 'div.node.expanded',
|
||||||
snapMode : 'inner',
|
snapMode : 'inner',
|
||||||
|
|
@ -68,68 +68,24 @@
|
||||||
|
|
||||||
// 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 sourceNode = ui.draggable;
|
|
||||||
var targetNode = $(this);
|
var targetLi = $this.find("[data-tree-node=" + $(this).data("tree-node") + "]");
|
||||||
|
var sourceLi = $this.find("[data-tree-node=" + ui.draggable.data("tree-node") + "]");
|
||||||
// finding nodes based on plaintext and html
|
|
||||||
// content is hard!
|
|
||||||
var targetLi = $('li').filter(function(){
|
|
||||||
|
|
||||||
li = $(this).clone()
|
|
||||||
.children("ul,li")
|
|
||||||
.remove()
|
|
||||||
.end();
|
|
||||||
var attr = li.attr('id');
|
|
||||||
if (typeof attr !== 'undefined' && attr !== false) {
|
|
||||||
return li.attr("id") == targetNode.attr("id");
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return li.html() == targetNode.html();
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
var sourceLi = $('li').filter(function(){
|
|
||||||
|
|
||||||
li = $(this).clone()
|
|
||||||
.children("ul,li")
|
|
||||||
.remove()
|
|
||||||
.end();
|
|
||||||
var attr = li.attr('id');
|
|
||||||
if (typeof attr !== 'undefined' && attr !== false) {
|
|
||||||
return li.attr("id") == sourceNode.attr("id");
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return li.html() == sourceNode.html();
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
var sourceliClone = sourceLi.clone();
|
|
||||||
var sourceUl = sourceLi.parent('ul');
|
var sourceUl = sourceLi.parent('ul');
|
||||||
|
|
||||||
if(sourceUl.children('li').size() > 1){
|
|
||||||
sourceLi.remove();
|
|
||||||
}else{
|
|
||||||
sourceUl.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
var id = sourceLi.attr("id");
|
|
||||||
|
|
||||||
if(targetLi.children('ul').size() >0){
|
var targetUl = targetLi.children('ul');
|
||||||
if (typeof id !== 'undefined' && id !== false) {
|
if (targetUl.length > 0){
|
||||||
targetLi.children('ul').append('<li id="'+id+'">'+sourceliClone.html()+'</li>');
|
targetUl.append(sourceLi);
|
||||||
}else{
|
} else {
|
||||||
targetLi.children('ul').append('<li>'+sourceliClone.html()+'</li>');
|
targetLi.append("<ul></ul>");
|
||||||
}
|
targetLi.children('ul').append(sourceLi);
|
||||||
}else{
|
|
||||||
if (typeof id !== 'undefined' && id !== false) {
|
|
||||||
targetLi.append('<ul><li id="'+id+'">'+sourceliClone.html()+'</li></ul>');
|
|
||||||
}else{
|
|
||||||
targetLi.append('<ul><li>'+sourceliClone.html()+'</li></ul>');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Removes any empty lists
|
||||||
|
if (sourceUl.children().length === 0){
|
||||||
|
sourceUl.remove();
|
||||||
|
}
|
||||||
|
|
||||||
}); // handleDropEvent
|
}); // handleDropEvent
|
||||||
|
|
||||||
} // Drag and drop
|
} // Drag and drop
|
||||||
|
|
@ -142,7 +98,8 @@
|
||||||
chartClass : "jOrgChart",
|
chartClass : "jOrgChart",
|
||||||
dragAndDrop: false
|
dragAndDrop: false
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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) {
|
||||||
var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
|
var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
|
||||||
|
|
@ -162,15 +119,15 @@
|
||||||
var $nodeContent = $node.clone()
|
var $nodeContent = $node.clone()
|
||||||
.children("ul,li")
|
.children("ul,li")
|
||||||
.remove()
|
.remove()
|
||||||
.end()
|
.end()
|
||||||
.html();
|
.html();
|
||||||
|
|
||||||
var new_node_id = $node.attr("id");
|
//Increaments the node count which is used to link the source list and the org chart
|
||||||
if (typeof new_node_id !== 'undefined' && new_node_id !== false) {
|
nodeCount++;
|
||||||
$nodeDiv = $("<div>").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
|
$node.attr("data-tree-node", nodeCount);
|
||||||
}else{
|
$nodeDiv = $("<div>").addClass("node")
|
||||||
$nodeDiv = $("<div>").addClass("node").append($nodeContent);
|
.attr("data-tree-node", nodeCount)
|
||||||
}
|
.append($nodeContent);
|
||||||
|
|
||||||
// Expand and contract nodes
|
// Expand and contract nodes
|
||||||
if ($childNodes.length > 0) {
|
if ($childNodes.length > 0) {
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
distance : 40,
|
distance : 40,
|
||||||
helper : 'clone',
|
helper : 'clone',
|
||||||
opacity : 0.8,
|
opacity : 0.8,
|
||||||
revert : true,
|
revert : 'invalid',
|
||||||
revertDuration : 100,
|
revertDuration : 100,
|
||||||
snap : 'div.node.expanded',
|
snap : 'div.node.expanded',
|
||||||
snapMode : 'inner',
|
snapMode : 'inner',
|
||||||
|
|
@ -68,68 +68,24 @@
|
||||||
|
|
||||||
// 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 sourceNode = ui.draggable;
|
|
||||||
var targetNode = $(this);
|
var targetLi = $this.find("[data-tree-node=" + $(this).data("tree-node") + "]");
|
||||||
|
var sourceLi = $this.find("[data-tree-node=" + ui.draggable.data("tree-node") + "]");
|
||||||
// finding nodes based on plaintext and html
|
|
||||||
// content is hard!
|
|
||||||
var targetLi = $('li').filter(function(){
|
|
||||||
|
|
||||||
li = $(this).clone()
|
|
||||||
.children("ul,li")
|
|
||||||
.remove()
|
|
||||||
.end();
|
|
||||||
var attr = li.attr('id');
|
|
||||||
if (typeof attr !== 'undefined' && attr !== false) {
|
|
||||||
return li.attr("id") == targetNode.attr("id");
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return li.html() == targetNode.html();
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
var sourceLi = $('li').filter(function(){
|
|
||||||
|
|
||||||
li = $(this).clone()
|
|
||||||
.children("ul,li")
|
|
||||||
.remove()
|
|
||||||
.end();
|
|
||||||
var attr = li.attr('id');
|
|
||||||
if (typeof attr !== 'undefined' && attr !== false) {
|
|
||||||
return li.attr("id") == sourceNode.attr("id");
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return li.html() == sourceNode.html();
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
var sourceliClone = sourceLi.clone();
|
|
||||||
var sourceUl = sourceLi.parent('ul');
|
var sourceUl = sourceLi.parent('ul');
|
||||||
|
|
||||||
if(sourceUl.children('li').size() > 1){
|
|
||||||
sourceLi.remove();
|
|
||||||
}else{
|
|
||||||
sourceUl.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
var id = sourceLi.attr("id");
|
|
||||||
|
|
||||||
if(targetLi.children('ul').size() >0){
|
var targetUl = targetLi.children('ul');
|
||||||
if (typeof id !== 'undefined' && id !== false) {
|
if (targetUl.length > 0){
|
||||||
targetLi.children('ul').append('<li id="'+id+'">'+sourceliClone.html()+'</li>');
|
targetUl.append(sourceLi);
|
||||||
}else{
|
} else {
|
||||||
targetLi.children('ul').append('<li>'+sourceliClone.html()+'</li>');
|
targetLi.append("<ul></ul>");
|
||||||
}
|
targetLi.children('ul').append(sourceLi);
|
||||||
}else{
|
|
||||||
if (typeof id !== 'undefined' && id !== false) {
|
|
||||||
targetLi.append('<ul><li id="'+id+'">'+sourceliClone.html()+'</li></ul>');
|
|
||||||
}else{
|
|
||||||
targetLi.append('<ul><li>'+sourceliClone.html()+'</li></ul>');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Removes any empty lists
|
||||||
|
if (sourceUl.children().length === 0){
|
||||||
|
sourceUl.remove();
|
||||||
|
}
|
||||||
|
|
||||||
}); // handleDropEvent
|
}); // handleDropEvent
|
||||||
|
|
||||||
} // Drag and drop
|
} // Drag and drop
|
||||||
|
|
@ -142,7 +98,8 @@
|
||||||
chartClass : "jOrgChart",
|
chartClass : "jOrgChart",
|
||||||
dragAndDrop: false
|
dragAndDrop: false
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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) {
|
||||||
var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
|
var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
|
||||||
|
|
@ -162,15 +119,15 @@
|
||||||
var $nodeContent = $node.clone()
|
var $nodeContent = $node.clone()
|
||||||
.children("ul,li")
|
.children("ul,li")
|
||||||
.remove()
|
.remove()
|
||||||
.end()
|
.end()
|
||||||
.html();
|
.html();
|
||||||
|
|
||||||
var new_node_id = $node.attr("id");
|
//Increaments the node count which is used to link the source list and the org chart
|
||||||
if (typeof new_node_id !== 'undefined' && new_node_id !== false) {
|
nodeCount++;
|
||||||
$nodeDiv = $("<div>").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
|
$node.attr("data-tree-node", nodeCount);
|
||||||
}else{
|
$nodeDiv = $("<div>").addClass("node")
|
||||||
$nodeDiv = $("<div>").addClass("node").append($nodeContent);
|
.attr("data-tree-node", nodeCount)
|
||||||
}
|
.append($nodeContent);
|
||||||
|
|
||||||
// Expand and contract nodes
|
// Expand and contract nodes
|
||||||
if ($childNodes.length > 0) {
|
if ($childNodes.length > 0) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue