Vista de árbol interactiva en Vanilla JavaScript-vanillatree

Vista prévia

Descripción

vanillatree is a simple, collapsible interactive tree view component with context menu support, implemented in vanilla JavaScript.

Funcionamiento

Incluya los archivos JavaScript y CSS de vanillatree en la página HTML.

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

Cree un contenedor donde desee presentar la vista de árbol.

<main></main>

Inicialice la vista de árbol y establezca el menú contextual del clic derecho como este:

var main = document.querySelector( 'main' ),


tree = new VanillaTree( main, {



contextmenu: [{





label: 'Menu 1',





action: function(id) {






alert('Menu 1 ' + id);





}




}, {





label: 'Menu 2',





action: function(id) {






alert('Menu 2 ' + id);





}




}]


});

Agregar nodos personalizados a la vista de árbol.

tree.add({

label: 'Label A',

id: 'a',

opened: true
});

tree.add({

label: 'Label B',

id: 'b'
});

tree.add({

label: 'Label A.A',

parent: 'a',

id: 'a.a',

opened: true,

selected: true
});

tree.add({

label: 'Label A.A.A',

parent: 'a.a'
});
tree.add({

label: 'Label A.A.B',

parent: 'a.a'
});

tree.add({

label: 'Label B.A',

parent: 'b'
});

API methods.

// add new nodes
tree.add(options);

// move a node to parent
tree.move(id, parentId);

// remove a node
tree.remove(id);

// open a node
tree.open(id);

// close a node
tree.close(id);

// toggle a node
tree.toggle(id);

// select a node
tree.select(id);

Events.

main.addEventListener('vtree-add', function(evt) {

// when added
});

main.addEventListener('vtree-remove', function(evt) {

// when closed
});

main.addEventListener('vtree-move', function(evt) {

// when moved
});

main.addEventListener('vtree-open', function(evt) {

// when opened
});

main.addEventListener('vtree-close', function(evt) {

// when closed
});

main.addEventListener('vtree-select', function(evt) {

// when selected
});

Registro de cambios

05/30/2018

• Various fixes