Completo archivo/árbol de carpetas en JavaScript puro-TreeJS

Vista prévia

Descripción

TreeJS es una biblioteca de JavaScript sencilla, rápida e independiente para representar dinámicamente un árbol de carpetas que comportamientos como el explorador de archivos de Windows.

Viene con varios métodos de API útiles para administrar el árbol de archivos/carpetas fácilmente y mediante programación.

Funcionamiento

Cargue el JavaScript y la hoja de estilos de TreeJS.

<script src="tree.js"></script>
<link rel="stylesheet" href="treejs.css">

Cargue el Font awesome para los iconos de carpeta (opcional).

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

Cree un elemento contenedor para contener el árbol de carpetas.

<div id="container"></div>

Prepare los datos para el árbol de carpetas.

var root = new TreeNode("root");


n1 = new TreeNode("1");


n11 = new TreeNode("1.1");


n2 = new TreeNode("2");


n3 = new TreeNode("3");


n31 = new TreeNode("3.1");


n32 = new TreeNode("3.2");


n321 = new TreeNode("3.2.1");


n33 = new TreeNode("3.3");

root.addChild(n1);
root.addChild(n2);
root.addChild(n3);

n1.addChild(n11);

n3.addChild(n31);
n3.addChild(n32);
n3.addChild(n33);

n3.setEnabled(false);

n32.addChild(n321);

Represente el árbol de carpetas en el contenedor que ha creado.

var tree = new TreeView(root, "#container");

Personalice los iconos del árbol de carpetas.

var tree = new TreeView(root, "#container",{


leaf_icon: "<span>&#128441;</span>"


parent_icon: "<span>&#128449;</span>",


open_icon: "<span>&#9698;</span>",


close_icon: "<span>&#9654;</span>"
});

Ejecute una función cuando se desencadene un menú contextual.

var tree = new TreeView(root, "#container",{


context_menu: undefined
});

Métodos de API para el árbol de carpetas.

// Resets the root-node (TreeNode)
tree.setRoot(root);










// Returns the root-node
tree.getRoot();












 // Expands all nodes
tree.expandAllNodes();







// Expands all nodes that are in the path (TreePath)

tree.expandPath(path);








 // Collapses all nodes
tree.collapseAllNodes();







 // Resets the container
tree.setContainer(container);





// Returns the container
tree.getContainer();









 // Resets the options (object)
tree.setOptions(options);







// Changes one option (string, object)
tree.changeOption(option, value);



// Returns the options
tree.getOptions();










 // Returns all selected nodes in the tree
tree.getSelectedNodes();







 // Reloads/Renders the tree inside of the container
tree.reload();

Métodos de API para los nodos.

new TreeNode(userobject, options);

// Adds a child to the current node and sets the parent of the node (TreeNode)
node.addChild(node);









// Removes the child at this position (integer)
 node.removeChildPos(pos);







// Removes the child from the current node, if contained (TreeNode)
node.removeChild(node);








// Returns a array with the children of the current node
node.getChildren();










// Returns the number of children
node.getChildCount();









// Returns the position of the child; -1 is returned if not found (TreeNode)
node.getIndexOfChild(node);






// Tries to get the root node of this node
node.getRoot();












// Resets the userobject (object)
node.setUserObject(userobject);




// Returns the userobject
node.getUserObject();









// Resets the options (object)
node.setOptions(options);







// Changes one option (string, object)
node.changeOption(option, value);



// Returns the options
node.getOptions();










 // Returns true, if the node doesn't have any children, else false
node.isLeaf();












 // Sets the expanded-state of the node (if it shows its children) (boolean)
node.setExpanded(true|false);





// Toggles the expanded-state of the node
node.toggleExpanded();








 // Returns, if the node is expanded or not
node.isExpanded();










 // Sets the enabled-state of the node (if it is enabled) (boolean)
node.setEnabled(true|false);





 // Toggles the enabled-state of the node
node.toggleEnabled();









// Returns, if the node is enabled or not
node.isEnabled();











// Sets the selected-state of the node (if it is selected) (boolean)
node.setSelected(true|false);





// Toggles the selected-state of the node
node.toggleSelected();








 // Returns, if the node is selected or not
node.isSelected();










 // Triggers the "open"-event of the node
node.open();













 // Sets the eventlistener of the event, if the callback is specified;
// if only the event is set, it returns the callback-function; if that is not
// set, it returns a empty function (string, function)
node.on(event, callback);







// Returns the callback-function for this event, if set (string)
node.getListener(event);







 // Returns if the node is equal to the parameter (TreeNode)
node.equals(node);










 // Returns the generated string from the userobject
node.toString();

Métodos de la API para la ruta de árbol.

new TreePath(root, node);

// Generates the path between root and node (TreeNode, TreeNode)
path.setPath(root, node);







// Returns the generated path as a array
path.getPath();












// Returns the path as a string (nodes joined with a ' - ')
path.toString();

Posibles eventos que se pueden adjuntar al nodo de árbol.

node.on('click', function(e, node){

// ...
});

node.on('expand', function(node){

// ...
});

node.on('collapse', function(node){

// ...
});

node.on('toggle_expanded', function(node){

// ...
});

node.on('open', function(node){

// ...
});

node.on('enable', function(node){

// ...
});

node.on('disable', function(node){

// ...
});

node.on('toggle_enabled', function(node){

// ...
});

node.on('select', function(node){

// ...
});

node.on('deselect', function(node){

// ...
});

node.on('toggle_selected', function(node){

// ...
});

node.on('contextmenu', function(e, node){

// ...
});