jOrgChart - A jQuery OrgChart Plugin

"); - if($this.is("ul")) { - buildNode($this.find("li:first"), $container, 0, opts); - } - else if($this.is("li")) { - buildNode($this, $container, 0, opts); - } - $appendTo.append($container); - - // add drag and drop if enabled - if(opts.dragAndDrop){ - $('div.node').draggable({ - cursor : 'move', - distance : 40, - helper : 'clone', - opacity : 0.8, - revert : true, - revertDuration : 100, - snap : 'div.node.expanded', - snapMode : 'inner', - stack : 'div.node' - }); - - $('div.node').droppable({ - accept : '.node', - activeClass : 'drag-active', - hoverClass : 'drop-hover' - }); - - // Drag start event handler for nodes - $('div.node').bind("dragstart", function handleDragStart( event, ui ){ - - var sourceNode = $(this); - sourceNode.parentsUntil('.node-container') - .find('*') - .filter('.node') - .droppable('disable'); - }); - - // Drag stop event handler for nodes - $('div.node').bind("dragstop", function handleDragStop( event, ui ){ - - /* reload the plugin */ - $(opts.chartElement).children().remove(); - $this.jOrgChart(opts); - }); - - // Drop event handler for nodes - $('div.node').bind("drop", function handleDropEvent( event, ui ) { - var sourceNode = ui.draggable; - var targetNode = $(this); - - // 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'); - - if(sourceUl.children('li').size() > 1){ - sourceLi.remove(); - }else{ - sourceUl.remove(); - } - - var id = sourceLi.attr("id"); - - if(targetLi.children('ul').size() >0){ - if (typeof id !== 'undefined' && id !== false) { - targetLi.children('ul').append('

'+sourceliClone.html()+'

'); - }else{ - targetLi.children('ul').append('

'+sourceliClone.html()+'

'); - } - }else{ - if (typeof id !== 'undefined' && id !== false) { - targetLi.append('

'+sourceliClone.html()+'

'); - }else{ - targetLi.append('

'+sourceliClone.html()+'

'); - } - } - - }); // handleDropEvent - - } // Drag and drop - }; - - // Option defaults - $.fn.jOrgChart.defaults = { - chartElement : 'body', - depth : -1, - chartClass : "jOrgChart", - dragAndDrop: false - }; - - // Method that recursively builds the tree - function buildNode($node, $appendTo, level, opts) { - var $table = $(""); - var $tbody = $(""); - - // Construct the node container(s) - var $nodeRow = $("").addClass("node-cells"); - var $nodeCell = $(""); - var $downLineCell = $(""); - $childNodes.each(function() { - var $left = $("").addClass("line left top"); - var $right = $("").addClass("line right top"); - $linesRow.append($left).append($right); - }); - - // horizontal line shouldn't extend beyond the first and last child branches - $linesRow.find("td:first") - .removeClass("top") - .end() - .find("td:last") - .removeClass("top"); - - $tbody.append($linesRow); - var $childNodesRow = $(""); - $childNodes.each(function() { - var $td = $("

").addClass("node-cell").attr("colspan", 2); - var $childNodes = $node.children("ul:first").children("li"); - var $nodeDiv; - - 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(); - - var new_node_id = $node.attr("id"); - if (typeof new_node_id !== 'undefined' && new_node_id !== false) { - $nodeDiv = $(" ").addClass("node").attr("id", $node.attr("id")).append($nodeContent); - }else{ - $nodeDiv = $(" ").addClass("node").append($nodeContent); - } - - // Expand and contract nodes - if ($childNodes.length > 0) { - $nodeDiv.click(function() { - var $this = $(this); - var $tr = $this.closest("tr"); - - if($tr.hasClass('contracted')){ - $this.css('cursor','n-resize'); - $tr.removeClass('contracted').addClass('expanded'); - $tr.nextAll("tr").css('visibility', ''); - }else{ - $this.css('cursor','s-resize'); - $tr.removeClass('expanded').addClass('contracted'); - $tr.nextAll("tr").css('visibility', 'hidden'); - } - }); - } - - $nodeCell.append($nodeDiv); - $nodeRow.append($nodeCell); - $tbody.append($nodeRow); - - if($childNodes.length > 0) { - // if it can be expanded then change the cursor - $nodeDiv.css('cursor','n-resize').addClass('expanded'); - - // recurse until leaves found (-1) or to the level specified - if(opts.depth == -1 \|\| (level+1 < opts.depth)) { - var $downLineRow = $("
").attr("colspan", $childNodes.length*2); - $downLineRow.append($downLineCell); - - // draw the connecting line from the parent node to the horizontal line - $downLine = $(" ").addClass("line down"); - $downLineCell.append($downLine); - $tbody.append($downLineRow); - - // Draw the horizontal lines - var $linesRow = $("

"); - $td.attr("colspan", 2); - // recurse through children lists and items - buildNode($(this), $td, level+1, opts); - $childNodesRow.append($td); - }); - - } - $tbody.append($childNodesRow); - } - - // 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); - } - }); - } - - $table.append($tbody); - $appendTo.append($table); - - /* Prevent trees collapsing if a link inside a node is clicked */ - $nodeDiv.children('a').click(function(e){ - console.log(e); - e.stopPropagation(); - }); - }; - -})(jQuery); -- cgit 1.2.3-korg