Simple Folder Tree With JSON And JavaScript – tree.js

Preview:

Description:

A simple, flexible tree library which dynamically renders a tree view of a directory/folder from hierarchical JSON data you provide.

How to use it:

Insert the tree.css and tree.js into the document.

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

Create a container to hold the folder tree.

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

Define your data to be presented in the tree.

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
  }]
}]);

Initialize the tree.js library and done.

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

Asynchronous loading is supported as well.

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));

More evnet listeners.

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