public/organigrama/js/jquery.jOrgChart.js
// Method that recursively builds the tree
Method that recursively builds the tree
Method that recursively builds the tree
function buildNode($node, $appendTo, level, opts) {
        var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
        var $tbody = $("<tbody/>");
        var $nodeRow = $("<tr/>").addClass("node-cells");
        var $nodeCell = $("<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);
        }
        var $nodeContent = $node.clone()
            .children("ul,li")
            .remove()
            .end()
            .html();
        nodeCount++;
        $node.data("tree-node", nodeCount);
        $nodeDiv = $("<div>").addClass("node")
            .data("tree-node", nodeCount)
            .append($nodeContent);
        $nodeDiv.append(
                "<div class='opciones'>" +
                "</div>")
            .mouseenter(function() {
                if ($(this).find("> .details > span").length == 0) {
                    var duplicate = $(this).find("> span.label_node").clone();
                    $(this).find("> .details").prepend(duplicate);
                }
                $(this).find(".details").toggle().parent().css("z-index", "999");
            }).mouseleave(function() {
                $(this).find(".details").toggle().parent().removeAttr("style");
            });
        var append_text = "<li class='temp'></li>";
        var $list_element = $node.clone()
            .children("ul,li")
            .remove()
            .end();
        if (opts.expand) {
            if ($childNodes.length > 0) {
                $nodeDiv.find(".opciones:eq(0)").closest(".node").append("<span class='exp-col'></span>");
                $nodeDiv.find(".exp-col").click(function() {
                    var $this = $(this);
                    var $tr = $this.closest("tr");
                    if ($tr.hasClass('contracted')) {
                        $tr.removeClass('contracted').addClass('expanded');
                        $tr.nextAll("tr").css('visibility', '');
                        $node.removeClass('collapsed');
                    } else {
                        $tr.removeClass('expanded').addClass('contracted');
                        $tr.nextAll("tr").css('visibility', 'hidden');
                        $node.addClass('collapsed');
                    }
                });
            }
        }
        $nodeCell.append($nodeDiv);
        $nodeRow.append($nodeCell);
        $tbody.append($nodeRow);
        if ($childNodes.length > 0) {
            if (opts.depth == -1 || (level + 1 < opts.depth)) {
                var $downLineRow = $("<tr/>");
                var $downLineCell = $("<td/>").attr("colspan", $childNodes.length * 2);
                $downLineRow.append($downLineCell);
                $downLine = $("<div></div>").addClass("line down");
                $downLineCell.append($downLine);
                $tbody.append($downLineRow);
                var $linesRow = $("<tr/>");
                $childNodes.each(function() {
                    var $left = $("<td>&nbsp;</td>").addClass("line left top");
                    var $right = $("<td>&nbsp;</td>").addClass("line right top");
                    $linesRow.append($left).append($right);
                });
                $linesRow.find("td:first")
                    .removeClass("top")
                    .end()
                    .find("td:last")
                    .removeClass("top");
                $tbody.append($linesRow);
                var $childNodesRow = $("<tr/>");
                $childNodes.each(function() {
                    var $td = $("<td class='node-container'/>");
                    $td.attr("colspan", 2);
                    buildNode($(this), $td, level + 1, opts);
                    $childNodesRow.append($td);
                });
            }
            $tbody.append($childNodesRow);
        }
        if ($node.attr('class') != undefined) {
            var classList = $node.attr('class').split(/\s+/);
            $.each(classList, function(index, item) {
                if (item == 'collapsed') {
                    $nodeRow.nextAll('tr').css('visibility', 'hidden');
                    $nodeRow.removeClass('expanded');
                    $nodeRow.addClass('contracted');
                } else {
                    $nodeDiv.addClass(item);
                }
            });
        }
        if (opts.control) {
            if (!$nodeDiv.hasClass("temp")) {
                $nodeDiv.find(".opciones:eq(0)").append("<span class='edit'></span>");
                $nodeDiv.find(".opciones:eq(0)").append("<span class='add'></span>");
                if ($nodeDiv.hasClass("child")) {
                    $nodeDiv.find(".opciones:eq(0)").append("<span class='del'></span>");
                }
            } else {
                $nodeDiv.find(".opciones:eq(0)").append("<span class='add'></span><span class='del'></span>");
            }
        }
        $table.append($tbody);
        $appendTo.append($table);
        $nodeDiv.children('a, span').click(function(e) {
            e.stopPropagation();
        });
    }
function buildNode ( $node , $appendTo , level , opts ) { var $table = $ ( "<table cellpadding='0' cellspacing='0' border='0'/>" ) ; var $tbody = $ ( "<tbody/>" ) ; var $nodeRow = $ ( "<tr/>" ) . addClass ( "node-cells" ) ; var $nodeCell = $ ( "<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 ) ; } var $nodeContent = $node . clone ( ) . children ( "ul,li" ) . remove ( ) . end ( ) . html ( ) ; nodeCount ++ ; $node . data ( "tree-node" , nodeCount ) ; $nodeDiv = $ ( "<div>" ) . addClass ( "node" ) . data ( "tree-node" , nodeCount ) . append ( $nodeContent ) ; $nodeDiv . append ( "<div class='opciones'>" + "</div>" ) . mouseenter ( function ( ) { if ( $ ( this ) . find ( "> .details > span" ) . length == 0 ) { var duplicate = $ ( this ) . find ( "> span.label_node" ) . clone ( ) ; $ ( this ) . find ( "> .details" ) . prepend ( duplicate ) ; } $ ( this ) . find ( ".details" ) . toggle ( ) . parent ( ) . css ( "z-index" , "999" ) ; } ) . mouseleave ( function ( ) { $ ( this ) . find ( ".details" ) . toggle ( ) . parent ( ) . removeAttr ( "style" ) ; } ) ; var append_text = "<li class='temp'></li>" ; var $list_element = $node . clone ( ) . children ( "ul,li" ) . remove ( ) . end ( ) ; if ( opts . expand ) { if ( $childNodes . length > 0 ) { $nodeDiv . find ( ".opciones:eq(0)" ) . closest ( ".node" ) . append ( "<span class='exp-col'></span>" ) ; $nodeDiv . find ( ".exp-col" ) . click ( function ( ) { var $this = $ ( this ) ; var $tr = $this . closest ( "tr" ) ; if ( $tr . hasClass ( 'contracted' ) ) { $tr . removeClass ( 'contracted' ) . addClass ( 'expanded' ) ; $tr . nextAll ( "tr" ) . css ( 'visibility' , '' ) ; $node . removeClass ( 'collapsed' ) ; } else { $tr . removeClass ( 'expanded' ) . addClass ( 'contracted' ) ; $tr . nextAll ( "tr" ) . css ( 'visibility' , 'hidden' ) ; $node . addClass ( 'collapsed' ) ; } } ) ; } } $nodeCell . append ( $nodeDiv ) ; $nodeRow . append ( $nodeCell ) ; $tbody . append ( $nodeRow ) ; if ( $childNodes . length > 0 ) { if ( opts . depth == - 1 || ( level + 1 < opts . depth ) ) { var $downLineRow = $ ( "<tr/>" ) ; var $downLineCell = $ ( "<td/>" ) . attr ( "colspan" , $childNodes . length * 2 ) ; $downLineRow . append ( $downLineCell ) ; $downLine = $ ( "<div></div>" ) . addClass ( "line down" ) ; $downLineCell . append ( $downLine ) ; $tbody . append ( $downLineRow ) ; var $linesRow = $ ( "<tr/>" ) ; $childNodes . each ( function ( ) { var $left = $ ( "<td>&nbsp;</td>" ) . addClass ( "line left top" ) ; var $right = $ ( "<td>&nbsp;</td>" ) . addClass ( "line right top" ) ; $linesRow . append ( $left ) . append ( $right ) ; } ) ; $linesRow . find ( "td:first" ) . removeClass ( "top" ) . end ( ) . find ( "td:last" ) . removeClass ( "top" ) ; $tbody . append ( $linesRow ) ; var $childNodesRow = $ ( "<tr/>" ) ; $childNodes . each ( function ( ) { var $td = $ ( "<td class='node-container'/>" ) ; $td . attr ( "colspan" , 2 ) ; buildNode ( $ ( this ) , $td , level + 1 , opts ) ; $childNodesRow . append ( $td ) ; } ) ; } $tbody . append ( $childNodesRow ) ; } if ( $node . attr ( 'class' ) != undefined ) { var classList = $node . attr ( 'class' ) . split ( / \s+ / ) ; $ . each ( classList , function ( index , item ) { if ( item == 'collapsed' ) { $nodeRow . nextAll ( 'tr' ) . css ( 'visibility' , 'hidden' ) ; $nodeRow . removeClass ( 'expanded' ) ; $nodeRow . addClass ( 'contracted' ) ; } else { $nodeDiv . addClass ( item ) ; } } ) ; } if ( opts . control ) { if ( ! $nodeDiv . hasClass ( "temp" ) ) { $nodeDiv . find ( ".opciones:eq(0)" ) . append ( "<span class='edit'></span>" ) ; $nodeDiv . find ( ".opciones:eq(0)" ) . append ( "<span class='add'></span>" ) ; if ( $nodeDiv . hasClass ( "child" ) ) { $nodeDiv . find ( ".opciones:eq(0)" ) . append ( "<span class='del'></span>" ) ; } } else { $nodeDiv . find ( ".opciones:eq(0)" ) . append ( "<span class='add'></span><span class='del'></span>" ) ; } } $table . append ( $tbody ) ; $appendTo . append ( $table ) ; $nodeDiv . children ( 'a, span' ) . click ( function ( e ) { e . stopPropagation ( ) ; } ) ; }
Method that recursively builds the tree
Method that recursively builds the tree
// Construct the node container(s) // Draw the node // Get the contents - any markup except li and ul allowed //Increaments the node count which is used to link the source list and the org chart // Expand and contract nodes // if it can be expanded then change the cursor //$nodeDiv.css('cursor','n-resize'); // recurse until leaves found (-1) or to the level specified // draw the connecting line from the parent node to the horizontal line // Draw the horizontal lines // horizontal line shouldn't extend beyond the first and last child branches // recurse through children lists and items // 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 /* Prevent trees collapsing if a link inside a node is clicked */