Árbol de carpetas simple con JSON y JavaScript-Tree. js

Vista prévia

Descripción

Una biblioteca de árbol sencilla y flexible que representa dinámicamente una vista de árbol de un directorio/carpeta a partir de datos JSON jerárquicos que proporcione.

Funcionamiento

Inserte el árbol. CSS y Tree. js en el documento.

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

Cree un contenedor para contener el árbol de carpetas.

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

Defina los datos que se presentarán en el árbol.

tree.json([{

name: 'file 1'
}, {

name: 'file 2'
}, {

name: 'folder 1',

open: true,

type: Tree.FOLDER,

selected: true,

children: [{


name: 'file 1'

}, {


name: 'file 2'

}, {


name: 'folder 1',


type: Tree.FOLDER

}]
}]);

Inicializar la biblioteca Tree. js y listo.

var tree = new Tree(document.getElementById('tree'));

También se admite la carga asincrónica.

tree.json([{

name: 'file 1'
}, {

name: 'file 2'
}, {

name: 'folder 1',

open: true,

type: Tree.FOLDER,

selected: true,

children: [{


name: 'file 1'

}, {


name: 'file 2'

}, {


name: 'folder 1',


type: Tree.FOLDER

}]
}, {

name: 'folder 2 (asynced)',

type: Tree.FOLDER,

async: true
}]);

tree.on('fetch', folder => window.setTimeout(() => {

tree.file({


name: 'file 1'

}, folder);

tree.file({


name: 'file 2'

}, folder);


folder.resolve();
}, 1000));

Más oyentes de evnet.

tree.on('open', e => console.log('open', e));
tree.on('select', e => console.log('select', e));
tree.on('action', e => console.log('action', e));