Create A Simple Tree View Using Vanilla JavaScript – js-treeview

Category: Javascript | June 21, 2018
Author:
Views Total: 8,830
Official Page: Go to website
Last Update: June 21, 2018
License: MIT

Preview:

Create A Simple Tree View Using Vanilla JavaScript – js-treeview

Description:

js-treeview is a minimal Javascript library used to create an expandable/collapsible tree view (fold structure) from an object array.

How to use it:

Load the treeview.min.css and treeview.min.js in the document.

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

Create a container where the JS library will render a tree view into it.

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

Build the tree structure using JS object array.

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: []
}];

Create the tree view.

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

Changelog:

v1.1.5 (06/21/2018)

  • Update

You Might Be Interested In:


3 thoughts on “Create A Simple Tree View Using Vanilla JavaScript – js-treeview

  1. Nico Steiner

    Thank you for this script. Integration was really easy and works like a charme

    One thing: In line 30 in section “Build the tree structure using JS object array” there is a comma which breaks the code.

    Reply
  2. Ravendra Singh Tomar

    i am trying to add some other control inside the tree leaf but the event blocked all other control how to add some other ui control like edit control spin number control

    Reply

Leave a Reply