Crear una vista de árbol simple con vanilla JavaScript-JS-TreeView

Vista prévia

Descripción

JS-TreeView es una biblioteca de JavaScript mínima que se utiliza para crear un vista de árbol expandible/plegable (estructura de pliegue) de una matriz de objetos.

Funcionamiento

Cargue el TreeView. min. CSS y TreeView. min. js en el documento.

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

Cree un contenedor donde la biblioteca JS representará una vista de árbol en ella.

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

Construya la estructura de árbol usando la matriz de objetos JS.

var tree = [{

name: 'Vegetables',

children: []

}, {

name: 'Fruits',

children: [{


name: 'Apple',


children: []

}, {


name: 'Orange',


children: []

}, {


name: 'Lemon',


children: []

}]

}, {

name: 'Candy',

children: [{


name: 'Gummies',


children: []

}, {


name: 'Chocolate',


children: [{


name: 'M & M\'s',


children: []


}, {


name: 'Hershey Bar',


children: []


}]

}, ]

}, {

name: 'Bread',

children: []
}];

Cree la vista de árbol.

var t = new TreeView(tree, 'tree');

Events available.

t.on('select', function (target,data) {

 alert('select');
 });

t.on('expand', function (target,leaves) {

 alert('expand');
 });

t.on('expandAll', function () {

 alert('expand');
 });

t.on('collapse', function (target,leaves) {

 alert('collapse');
 });

t.on('collapseAll', function () {

 alert('collapse');
 });

Registro de cambios

v1.1.5 (06/21/2018)

• actualizar