Change to work with IDs and non-id trees
ahzgdn
parent
2ba68bd3bb
commit
1242eff76e
|
|
@ -1,238 +1,269 @@
|
||||||
/**
|
/**
|
||||||
* jQuery org-chart/tree plugin.
|
* jQuery org-chart/tree plugin.
|
||||||
*
|
*
|
||||||
* Author: Wes Nolte
|
* Author: Wes Nolte
|
||||||
* http://twitter.com/wesnolte
|
* http://twitter.com/wesnolte
|
||||||
*
|
*
|
||||||
* Based on the work of Mark Lee
|
* Based on the work of Mark Lee
|
||||||
* http://www.capricasoftware.co.uk
|
* http://www.capricasoftware.co.uk
|
||||||
*
|
*
|
||||||
* This software is licensed under the Creative Commons Attribution-ShareAlike
|
* ID implementation by Aleks Drevenšek
|
||||||
* 3.0 License.
|
*
|
||||||
*
|
* ID implementation fixed(changed) by Adrian Hinz
|
||||||
* See here for license terms:
|
*
|
||||||
* http://creativecommons.org/licenses/by-sa/3.0
|
* This software is licensed under the Creative Commons Attribution-ShareAlike
|
||||||
*/
|
* 3.0 License.
|
||||||
|
*
|
||||||
|
* See here for license terms:
|
||||||
|
* http://creativecommons.org/licenses/by-sa/3.0
|
||||||
|
*/
|
||||||
(function($) {
|
(function($) {
|
||||||
|
|
||||||
$.fn.jOrgChart = function(options) {
|
$.fn.jOrgChart = function(options) {
|
||||||
var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
|
var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
|
||||||
var $appendTo = $(opts.chartElement);
|
var $appendTo = $(opts.chartElement);
|
||||||
|
|
||||||
// build the tree
|
// build the tree
|
||||||
$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);
|
||||||
}
|
}
|
||||||
else if($this.is("li")) {
|
else if($this.is("li")) {
|
||||||
buildNode($this, $container, 0, opts);
|
buildNode($this, $container, 0, opts);
|
||||||
}
|
}
|
||||||
$appendTo.append($container);
|
$appendTo.append($container);
|
||||||
|
|
||||||
// add drag and drop if enabled
|
// add drag and drop if enabled
|
||||||
if(opts.dragAndDrop){
|
if(opts.dragAndDrop){
|
||||||
$('div.node').draggable({
|
$('div.node').draggable({
|
||||||
cursor : 'move',
|
cursor : 'move',
|
||||||
distance : 40,
|
distance : 40,
|
||||||
helper : 'clone',
|
helper : 'clone',
|
||||||
opacity : 0.8,
|
opacity : 0.8,
|
||||||
revert : true,
|
revert : true,
|
||||||
revertDuration : 100,
|
revertDuration : 100,
|
||||||
snap : 'div.node.expanded',
|
snap : 'div.node.expanded',
|
||||||
snapMode : 'inner',
|
snapMode : 'inner',
|
||||||
stack : 'div.node'
|
stack : 'div.node'
|
||||||
});
|
});
|
||||||
|
|
||||||
$('div.node').droppable({
|
$('div.node').droppable({
|
||||||
accept : '.node',
|
accept : '.node',
|
||||||
activeClass : 'drag-active',
|
activeClass : 'drag-active',
|
||||||
hoverClass : 'drop-hover'
|
hoverClass : 'drop-hover'
|
||||||
});
|
});
|
||||||
|
|
||||||
// Drag start event handler for nodes
|
// Drag start event handler for nodes
|
||||||
$('div.node').bind("dragstart", function handleDragStart( event, ui ){
|
$('div.node').bind("dragstart", function handleDragStart( event, ui ){
|
||||||
|
|
||||||
var sourceNode = $(this);
|
var sourceNode = $(this);
|
||||||
sourceNode.parentsUntil('.node-container')
|
sourceNode.parentsUntil('.node-container')
|
||||||
.find('*')
|
.find('*')
|
||||||
.filter('.node')
|
.filter('.node')
|
||||||
.droppable('disable');
|
.droppable('disable');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Drag stop event handler for nodes
|
// Drag stop event handler for nodes
|
||||||
$('div.node').bind("dragstop", function handleDragStop( event, ui ){
|
$('div.node').bind("dragstop", function handleDragStop( event, ui ){
|
||||||
|
|
||||||
/* reload the plugin */
|
/* reload the plugin */
|
||||||
$(opts.chartElement).children().remove();
|
$(opts.chartElement).children().remove();
|
||||||
$this.jOrgChart(opts);
|
$this.jOrgChart(opts);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 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 sourceNode = ui.draggable;
|
||||||
var targetNode = $(this);
|
var targetNode = $(this);
|
||||||
|
|
||||||
// finding nodes based on plaintext and html
|
// finding nodes based on plaintext and html
|
||||||
// content is hard!
|
// content is hard!
|
||||||
var targetLi = $('li').filter(function(){
|
var targetLi = $('li').filter(function(){
|
||||||
|
|
||||||
li = $(this).clone()
|
li = $(this).clone()
|
||||||
.children("ul,li")
|
.children("ul,li")
|
||||||
.remove()
|
.remove()
|
||||||
.end();
|
.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();
|
||||||
|
}
|
||||||
|
|
||||||
return li.html() == targetNode.html();
|
});
|
||||||
});
|
|
||||||
|
|
||||||
var sourceLi = $('li').filter(function(){
|
var sourceLi = $('li').filter(function(){
|
||||||
|
|
||||||
li = $(this).clone()
|
li = $(this).clone()
|
||||||
.children("ul,li")
|
.children("ul,li")
|
||||||
.remove()
|
.remove()
|
||||||
.end();
|
.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();
|
||||||
|
}
|
||||||
|
|
||||||
return li.html() == sourceNode.html();
|
});
|
||||||
});
|
|
||||||
|
|
||||||
var sourceliClone = sourceLi.clone();
|
var sourceliClone = sourceLi.clone();
|
||||||
var sourceUl = sourceLi.parent('ul');
|
var sourceUl = sourceLi.parent('ul');
|
||||||
|
|
||||||
if(sourceUl.children('li').size() > 1){
|
if(sourceUl.children('li').size() > 1){
|
||||||
sourceLi.remove();
|
sourceLi.remove();
|
||||||
}else{
|
}else{
|
||||||
sourceUl.remove();
|
sourceUl.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
if(targetLi.children('ul').size() >0){
|
var id = sourceLi.attr("id");
|
||||||
targetLi.children('ul').append('<li>'+sourceliClone.html()+'</li>');
|
|
||||||
}else{
|
|
||||||
targetLi.append('<ul><li>'+sourceliClone.html()+'</li></ul>');
|
|
||||||
}
|
|
||||||
|
|
||||||
}); // handleDropEvent
|
if(targetLi.children('ul').size() >0){
|
||||||
|
if (typeof id !== 'undefined' && id !== false) {
|
||||||
|
targetLi.children('ul').append('<li id="'+id+'">'+sourceliClone.html()+'</li>');
|
||||||
|
}else{
|
||||||
|
targetLi.children('ul').append('<li>'+sourceliClone.html()+'</li>');
|
||||||
|
}
|
||||||
|
}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>');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
} // Drag and drop
|
}); // handleDropEvent
|
||||||
};
|
|
||||||
|
|
||||||
// Option defaults
|
} // Drag and drop
|
||||||
$.fn.jOrgChart.defaults = {
|
};
|
||||||
chartElement : 'body',
|
|
||||||
depth : -1,
|
|
||||||
chartClass : "jOrgChart",
|
|
||||||
dragAndDrop: false
|
|
||||||
};
|
|
||||||
|
|
||||||
// Method that recursively builds the tree
|
// Option defaults
|
||||||
function buildNode($node, $appendTo, level, opts) {
|
$.fn.jOrgChart.defaults = {
|
||||||
|
chartElement : 'body',
|
||||||
|
depth : -1,
|
||||||
|
chartClass : "jOrgChart",
|
||||||
|
dragAndDrop: false
|
||||||
|
};
|
||||||
|
|
||||||
var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
|
// Method that recursively builds the tree
|
||||||
var $tbody = $("<tbody/>");
|
function buildNode($node, $appendTo, level, opts) {
|
||||||
|
|
||||||
// Construct the node container(s)
|
var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
|
||||||
var $nodeRow = $("<tr/>").addClass("node-cells");
|
var $tbody = $("<tbody/>");
|
||||||
var $nodeCell = $("<td/>").addClass("node-cell").attr("colspan", 2);
|
|
||||||
var $childNodes = $node.children("ul:first").children("li");
|
|
||||||
var $nodeDiv;
|
|
||||||
|
|
||||||
if($childNodes.length > 1) {
|
// Construct the node container(s)
|
||||||
$nodeCell.attr("colspan", $childNodes.length * 2);
|
var $nodeRow = $("<tr/>").addClass("node-cells");
|
||||||
}
|
var $nodeCell = $("<td/>").addClass("node-cell").attr("colspan", 2);
|
||||||
// Draw the node
|
var $childNodes = $node.children("ul:first").children("li");
|
||||||
// Get the contents - any markup except li and ul allowed
|
var $nodeDiv;
|
||||||
var $nodeContent = $node.clone()
|
|
||||||
.children("ul,li")
|
|
||||||
.remove()
|
|
||||||
.end()
|
|
||||||
.html();
|
|
||||||
|
|
||||||
$nodeDiv = $("<div>").addClass("node").append($nodeContent);
|
if($childNodes.length > 1) {
|
||||||
|
$nodeCell.attr("colspan", $childNodes.length * 2);
|
||||||
|
}
|
||||||
|
// Draw the node
|
||||||
|
// Get the contents - any markup except li and ul allowed
|
||||||
|
var $nodeContent = $node.clone()
|
||||||
|
.children("ul,li")
|
||||||
|
.remove()
|
||||||
|
.end()
|
||||||
|
.html();
|
||||||
|
|
||||||
// Expand and contract nodes
|
var new_node_id = $node.attr("id")
|
||||||
if ($childNodes.length > 0) {
|
if (typeof new_node_id !== 'undefined' && new_node_id !== false) {
|
||||||
$nodeDiv.click(function() {
|
$nodeDiv = $("<div>").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
|
||||||
var $this = $(this);
|
}else{
|
||||||
var $tr = $this.closest("tr");
|
$nodeDiv = $("<div>").addClass("node").append($nodeContent);
|
||||||
$tr.nextAll("tr").fadeToggle("fast");
|
}
|
||||||
|
|
||||||
if($tr.hasClass('contracted')){
|
// Expand and contract nodes
|
||||||
$this.css('cursor','n-resize');
|
if ($childNodes.length > 0) {
|
||||||
$tr.removeClass('contracted');
|
$nodeDiv.click(function() {
|
||||||
$tr.addClass('expanded');
|
var $this = $(this);
|
||||||
}else{
|
var $tr = $this.closest("tr");
|
||||||
$this.css('cursor','s-resize');
|
$tr.nextAll("tr").fadeToggle("fast");
|
||||||
$tr.removeClass('expanded');
|
|
||||||
$tr.addClass('contracted');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$nodeCell.append($nodeDiv);
|
if($tr.hasClass('contracted')){
|
||||||
$nodeRow.append($nodeCell);
|
$this.css('cursor','n-resize');
|
||||||
$tbody.append($nodeRow);
|
$tr.removeClass('contracted');
|
||||||
|
$tr.addClass('expanded');
|
||||||
|
}else{
|
||||||
|
$this.css('cursor','s-resize');
|
||||||
|
$tr.removeClass('expanded');
|
||||||
|
$tr.addClass('contracted');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if($childNodes.length > 0) {
|
$nodeCell.append($nodeDiv);
|
||||||
// if it can be expanded then change the cursor
|
$nodeRow.append($nodeCell);
|
||||||
$nodeDiv.css('cursor','n-resize').addClass('expanded');
|
$tbody.append($nodeRow);
|
||||||
|
|
||||||
// recurse until leaves found (-1) or to the level specified
|
if($childNodes.length > 0) {
|
||||||
if(opts.depth == -1 || (level+1 < opts.depth)) {
|
// if it can be expanded then change the cursor
|
||||||
var $downLineRow = $("<tr/>");
|
$nodeDiv.css('cursor','n-resize').addClass('expanded');
|
||||||
var $downLineCell = $("<td/>").attr("colspan", $childNodes.length*2);
|
|
||||||
$downLineRow.append($downLineCell);
|
|
||||||
|
|
||||||
// draw the connecting line from the parent node to the horizontal line
|
// recurse until leaves found (-1) or to the level specified
|
||||||
$downLine = $("<div></div>").addClass("line down");
|
if(opts.depth == -1 || (level+1 < opts.depth)) {
|
||||||
$downLineCell.append($downLine);
|
var $downLineRow = $("<tr/>");
|
||||||
$tbody.append($downLineRow);
|
var $downLineCell = $("<td/>").attr("colspan", $childNodes.length*2);
|
||||||
|
$downLineRow.append($downLineCell);
|
||||||
|
|
||||||
// Draw the horizontal lines
|
// draw the connecting line from the parent node to the horizontal line
|
||||||
var $linesRow = $("<tr/>");
|
$downLine = $("<div></div>").addClass("line down");
|
||||||
$childNodes.each(function() {
|
$downLineCell.append($downLine);
|
||||||
var $left = $("<td> </td>").addClass("line left top");
|
$tbody.append($downLineRow);
|
||||||
var $right = $("<td> </td>").addClass("line right top");
|
|
||||||
$linesRow.append($left).append($right);
|
|
||||||
});
|
|
||||||
|
|
||||||
// horizontal line shouldn't extend beyond the first and last child branches
|
// Draw the horizontal lines
|
||||||
$linesRow.find("td:first")
|
var $linesRow = $("<tr/>");
|
||||||
.removeClass("top")
|
$childNodes.each(function() {
|
||||||
.end()
|
var $left = $("<td> </td>").addClass("line left top");
|
||||||
.find("td:last")
|
var $right = $("<td> </td>").addClass("line right top");
|
||||||
.removeClass("top");
|
$linesRow.append($left).append($right);
|
||||||
|
});
|
||||||
|
|
||||||
$tbody.append($linesRow);
|
// horizontal line shouldn't extend beyond the first and last child branches
|
||||||
var $childNodesRow = $("<tr/>");
|
$linesRow.find("td:first")
|
||||||
$childNodes.each(function() {
|
.removeClass("top")
|
||||||
var $td = $("<td class='node-container'/>");
|
.end()
|
||||||
$td.attr("colspan", 2);
|
.find("td:last")
|
||||||
// recurse through children lists and items
|
.removeClass("top");
|
||||||
buildNode($(this), $td, level+1, opts);
|
|
||||||
$childNodesRow.append($td);
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
$tbody.append($linesRow);
|
||||||
$tbody.append($childNodesRow);
|
var $childNodesRow = $("<tr/>");
|
||||||
}
|
$childNodes.each(function() {
|
||||||
|
var $td = $("<td class='node-container'/>");
|
||||||
|
$td.attr("colspan", 2);
|
||||||
|
// recurse through children lists and items
|
||||||
|
buildNode($(this), $td, level+1, opts);
|
||||||
|
$childNodesRow.append($td);
|
||||||
|
});
|
||||||
|
|
||||||
// any classes on the LI element get copied to the relevant node in the tree
|
|
||||||
// apart from the special 'collapsed' class, which collapses the sub-tree at this point
|
|
||||||
if ($node.attr('class') != undefined) {
|
|
||||||
var classList = $node.attr('class').split(/\s+/);
|
|
||||||
$.each(classList, function(index,item) {
|
|
||||||
if (item == 'collapsed') {
|
|
||||||
$nodeRow.nextAll('tr').css('display', 'none');
|
|
||||||
$nodeRow.removeClass('expanded');
|
|
||||||
$nodeRow.addClass('contracted');
|
|
||||||
$nodeDiv.css('cursor','s-resize');
|
|
||||||
} else {
|
|
||||||
$nodeDiv.addClass(item);
|
|
||||||
}
|
}
|
||||||
});
|
$tbody.append($childNodesRow);
|
||||||
}
|
}
|
||||||
|
|
||||||
$table.append($tbody);
|
// any classes on the LI element get copied to the relevant node in the tree
|
||||||
$appendTo.append($table);
|
// apart from the special 'collapsed' class, which collapses the sub-tree at this point
|
||||||
};
|
if ($node.attr('class') != undefined) {
|
||||||
|
var classList = $node.attr('class').split(/\s+/);
|
||||||
|
$.each(classList, function(index,item) {
|
||||||
|
if (item == 'collapsed') {
|
||||||
|
$nodeRow.nextAll('tr').css('display', 'none');
|
||||||
|
$nodeRow.removeClass('expanded');
|
||||||
|
$nodeRow.addClass('contracted');
|
||||||
|
$nodeDiv.css('cursor','s-resize');
|
||||||
|
} else {
|
||||||
|
$nodeDiv.addClass(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$table.append($tbody);
|
||||||
|
$appendTo.append($table);
|
||||||
|
};
|
||||||
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
Loading…
Reference in New Issue