Arbol de directorios con jQuery

jquery.dynatree.js es un plugin jQuery para la creación de estructuras del tipo árbol, muy similar a la de un directorio, de una manera rápida y eficiente.

Como principales características de este plugin podemos destacar que se encuentra optimizado para representar arboles de muchos elementos sin ningún tipo de inconvenientes. También es para remarcar que puede utilizar lazy load AJAX para cargar los elementos de forma secuencial sin comprometer el rendimiento de nuestro sitio.

Las estructuras se pueden crear de distintas maneras, probablemente la más eficiente sea por medio de JSON, esto más que nada es practico de cara a la construcción y comunicación de JavaScript con algún lenguaje del lado del servidor como puede ser PHP.

Ejemplo de uso:

JavaScript:

$(function(){
    // Variant 1:
    $("span.dynatree-edit-icon").live("click", function(e){
        alert("Edit " + $.ui.dynatree.getNode(e.target));
    });
    $("#tree").dynatree({
        onActivate: function(node) {
        //        $("#info").text("You activated " + node);
    },
    onRender: function(node, nodeSpan) {
    $(nodeSpan).find('.dynatree-icon')
        .before('<span></span>');
    },
    // Variant 2:
    onClick: function(node, e){
        if($(e.target).hasClass("dynatree-edit-icon")){
            $("#info").text("You clicked " + node + ",  url=" + node.url);
        }
    },
    children: [
        {title: "Item 1"},
        {title: "Folder 2", isFolder: true,
        children: [
            {title: "Sub-item 2.1"},
            {title: "Sub-item 2.2"}
            ]
        },
        {title: "Item 3"}
        ]
    });
});

CSS:

span.dynatree-icon.dynatree-edit-icon
{
border: 1px solid red;
background-position: 0 -112;
}

HTML:

<div id="tree"></div>
<div id="info"></div>

Resultado:

Eso es todo. El plugin es muy facil de utilizar, funciona en todos los navegadores modernos, y no tanto 😀

Web: jquery.dynatree.js